Search code examples
mapboxmapbox-marker

How to put marker on svg map image using Mapbox?

I am trying to figure out how to put marker on state map(svg file). State map is divided into counties and I need to put icon on counties based on condition. There are some good example on mapbox site to add markers on map but I am not sure how to load svg map in mapbox and add marker to counties. May be I am asking totally wrong questions. Please guide.

I have seen this example - https://www.inhofe.senate.gov/

I am trying to do same for learning but not sure how to get started using same example. Thats the image - https://www.inhofe.senate.gov/assets/images/theme/okstatemap.svg

Solution

  • If you are interested in using a purely SVG map without any georeferencing or an underlying coordinate system, Mapbox may not be the best tool for your use case. Typically, if you were to use Mapbox to implement a state map displaying county borders accompanied by markers for each county, the workflow would look like:

    1. Creating a GeoJSON file containing the data for the county boundary data. (You can consider this state boundary GeoJSON from Natural Earth as an example.)
    2. Adding this GeoJSON data as a source to your map.
    3. Adding a corresponding layer to visually style the data presented in the aforementioned source.
    4. Using a tool such as Turf.js's centroid method to obtain the center coordinate of each state, and add a marker for each of these coordinates.

    This example from our documentation demonstrates the results of steps 1-3 in practice. This would likely be a better approach than using SVGs if you are interested in using Mapbox in your implementation.