Member Avatar for tom_benton

I have a friend who will walk from San Diego to Montreal, Canada and want people to be able
to see the States he will be walking through. How a map like this can be made and stick to the site and our Facebok page?

  • 3 Contributors
  • 2 Replies
  • 112 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by tdjprj

Dani AI

Generated

A simple, robust plan that matches what asked for and builds on points from and .

If the walk can be exported as a route file (or drawn once), the cleanest solution is to turn that route into GeoJSON, load it into a small client map, and programmatically mark every U.S. state polygon that the line touches. That gives a map that highlights exactly which states were traversed and can show progress or waypoints.

A minimal workflow and example (client-side):

  1. Get the route as GeoJSON and obtain a U.S. states GeoJSON (see resources below).
  2. Render a basemap and the route with a lightweight library.
  3. Use a geometry library to test each state polygon for intersection with the route and style those states.

Example snippet (Leaflet + Turf style):

var map = L.map('map').setView([39,-98],4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.geoJSON(routeGeoJSON, {color:'red'}).addTo(map);

var touched = [];
statesGeoJSON.features.forEach(function(st){
  if (turf.booleanIntersects(st, routeGeoJSON)) touched.push(st);
});

L.geoJSON({type:'FeatureCollection', features:touched},
  {style:{fillColor:'orange', fillOpacity:0.4}}).addTo(map);

Embedding notes and cautions:

  • Website: host the HTML/JS and the GeoJSON files; fetch the route file to allow updates. For live updates poll the route endpoint or push updates from a server. Mind API quotas and privacy when publishing live location.
  • Facebook: you cannot execute arbitrary client JS inside a normal post. Host the interactive map on your site and either post the link or add it as a Page Tab (requires a Facebook app, HTTPS, and tabs are typically desktop-only). Alternatively share snapshots or summary cards for mobile users.

Useful resources: Leaflet, Turf.js, and state boundary data from the U.S. Census or Natural Earth.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

https://developers.google.com/kml/documentation/

If your friend is using GPS tracking, then getting a KML file should be easy. I've also seen GPS products on phones that automatically update a map on a website. Don't know the name though.

Member Avatar for tdjprj

Maybe he needs a map alike this:

Bascially it let you pinpoint locations on a Google map. You can then copy and paste the code to your website for showing to visitors

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.