on Events.Click, -> featureID = markerContent.name updateReviewScore(featureID, newScore) # Use the on function to listen for the click event confirmRateThis. When people interact with this prototype, they can see the review score and count changing and get instant feedbacks from their actions. In this example, after a user submits a new rating, the updateReviewScore function fetches the latest data and recalculates the count and score, and then the updateFeature function updates this specific feature with the new count and score. This will help you create more advanced interactions, such as rating a restaurant or adding a museum to a travel list.
#PROTOPIE TOGGLE UPDATE#
You can also update the data in real-time by using the insertFeature method of the Datasets API.
For example, when clicking on a marker, add an active class to that marker and trigger the state switch function of a layer:ĭ (feature, i) -> img = document.createElement('img') img.className = "location-marker" # use images as markers on the map = "url('images/" + (i + 1) + ".png')" marker = new mapboxgl.Marker(img).setLngLat().addTo(map) img.addEventListener("click",() -> # add an active class highlightedMarkers = document.querySelectorAll('.active') for highlightMarker,i in highlightedMarkers ('active') ('active') # switch marker content when clicking (i) ) 4. You can also add interactions to the map that correspond to specific mouse or touch events. This makes it easy to retrieve the data on a live map and style the data in any way you want with libraries like Mapbox GL JS.
The data that you created with the dataset editor is stored as GeoJSON and includes longitude and latitude coordinates. You can create one from the token page of Mapbox Studio. 2) An access token with scopes datasets:read and datasets:write. You will need two things: 1) A dataset ID, you can find the ID from the dataset view page. Then, use the listFeatures method to fetch the data. In the modules folder, create a new file and name it npm.coffee, then add:
#PROTOPIE TOGGLE INSTALL#
The Mapbox JavaScript SDK makes it simple to interact with the API.įirst, install Mapbox JavaScript SDK as a Node.js module:Ĭd ~/my-framer-project npm install mapbox Once you create the POI data, you can access them directly through the Mapbox Datasets API.