adobe-webplatform / Snap.svg

The JavaScript library for modern SVG graphics.
http://snapsvg.io
Apache License 2.0
13.95k stars 1.15k forks source link

turn longitude-latitude to coordinate on map demo #636

Open hadimajidi opened 4 years ago

hadimajidi commented 4 years ago

there is a map demo. I could not find something to turn longitude-latitude to coordinate on map demo. any help?

ibrierley commented 4 years ago

Is something like this any use ? https://stackoverflow.com/questions/2103924/mercator-longitude-and-latitude-calculations-to-x-and-y-on-a-cropped-map-of-the

hadimajidi commented 4 years ago

thx I try to use this code on javascript function convertGeoToPixel(latitude, longitude, mapWidth, // in pixels mapHeight, // in pixels mapLngLeft, // in degrees. the longitude of the left side of the map (i.e. the longitude of whatever is depicted on the left-most part of the map image) mapLngRight, // in degrees. the longitude of the right side of the map mapLatBottom) // in degrees. the latitude of the bottom of the map { const mapLatBottomRad = mapLatBottom Math.PI / 180 const latitudeRad = latitude Math.PI / 180 const mapLngDelta = (mapLngRight - mapLngLeft)

const worldMapWidth = ((mapWidth / mapLngDelta) * 360) / (2 * Math.PI)
const mapOffsetY = (worldMapWidth / 2 * Math.log((1 + Math.sin(mapLatBottomRad)) / (1 - Math.sin(mapLatBottomRad))))

const x = (longitude - mapLngLeft) * (mapWidth / mapLngDelta)
const y = mapHeight - ((worldMapWidth / 2 * Math.log((1 + Math.sin(latitudeRad)) / (1 - Math.sin(latitudeRad)))) - mapOffsetY)

return {x, y} // the pixel x,y value of this point on the map image

} but there is some problem on svg map on setting options mapWidth,mapHeight,mapLngLeft,mapLngRight,mapLatBottom could someone give this information for that svg map ?