{"id":1497,"date":"2014-11-23T20:29:48","date_gmt":"2014-11-23T20:29:48","guid":{"rendered":"http:\/\/41j.com\/blog\/?p=1497"},"modified":"2015-03-13T04:23:34","modified_gmt":"2015-03-13T04:23:34","slug":"slippy_maps","status":"publish","type":"post","link":"https:\/\/41j.com\/blog\/2014\/11\/slippy_maps\/","title":{"rendered":"Slippy maps"},"content":{"rendered":"

I’ve been looking at Javascript, googlemap-like maps. It seems that these are called “slippy maps”.<\/p>\n

There’s some useful information of the Openstreetmap wiki here<\/a>.<\/p>\n

They recommend a few Javascript libraries, including LeafletJS and OpenLayers. I tried OpenLayers first, but it’s pretty big, just to get the examples working from github I’d need node.js\/JVM etc…<\/p>\n

I decided to play with LeafletJS<\/a>, it was a lot quicker to get the examples working!<\/p>\n

The LeafletJS demo pulls tile images from URLs that look like this:<\/p>\n

\r\nhttps:\/\/c.tiles.mapbox.com\/v3\/examples.map-i875mjb7\/13\/4094\/2724.png\r\n<\/pre>\n
I sptent some time trying to figure out how coordinates are translated into the URL. The above representing a tile near [51.505, -0.09] at zoom level 13. The 13 is obvious enough. However the latitude and longitude took some googling.<\/p>\n
It seems that pretty much all mapping services use the Spherical Mercator projection (see wikipedia<\/a> and openstreetmap<\/a>  ). There are a bunch of tools for making tile sets (particularly from flat images).<\/p>\n
Anyway, I wanted to make my dataset manually at first to try things out. I created a directory structure that looks like this:<\/p>\n
\r\n.\/13\/4094\/2723.png\r\n.\/13\/4094\/2724.png\r\n.\/13\/4095\/2723.png\r\n.\/13\/4095\/2724.png\r\n.\/13\/4092\/2723.png\r\n.\/13\/4092\/2724.png\r\n.\/13\/4093\/2723.png\r\n.\/13\/4093\/2724.png\r\n<\/pre>\n
And used a modified version of the LeafletJS example, telling it to pull data from my server:<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n        <meta charset="utf-8" \/>\r\n\r\n        <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n\r\n        <link rel="stylesheet" href="leaflet.css" \/>\r\n<\/head>\r\n<body>\r\n        <div id="map" style="width: 600px; height: 400px"><\/div>\r\n\r\n        <script src="leaflet.js"><\/script>\r\n        <script>\r\n\r\n                var map = L.map('map').setView([51.505, -0.09], 13);\r\n\r\n                L.tileLayer('http:\/\/192.168.0.12\/maptest\/{z}\/{x}\/{y}.png', {\r\n                        maxZoom: 18,\r\n                        attribution: '41j',\r\n                        id: 'example'\r\n                }).addTo(map);\r\n\r\n\r\n                var popup = L.popup();\r\n\r\n                function onMapClick(e) {\r\n                        popup\r\n                                .setLatLng(e.latlng)\r\n                                .setContent("You clicked the map at " + e.latlng.toString())\r\n                                .openOn(map);\r\n                }\r\n\r\n                map.on('click', onMapClick);\r\n\r\n        <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
This worked pretty well, and gives me a basis for trying other stuff out.<\/p>\n
Notes<\/h2>\n
The C code which performs this conversion replicated from the OSM wiki<\/a> is as follows:<\/p>\n
\r\n#include <math.h>\r\n#include <iostream>\r\n\r\nusing namespace std;\r\n\r\nint long2tilex(double lon, int z) \r\n{ \r\n\treturn (int)(floor((lon + 180.0) \/ 360.0 * pow(2.0, z))); \r\n}\r\n \r\nint lat2tiley(double lat, int z)\r\n{ \r\n\treturn (int)(floor((1.0 - log( tan(lat * M_PI\/180.0) + 1.0 \/ cos(lat * M_PI\/180.0)) \/ M_PI) \/ 2.0 * pow(2.0, z))); \r\n}\r\n \r\ndouble tilex2long(int x, int z) \r\n{\r\n\treturn x \/ pow(2.0, z) * 360.0 - 180;\r\n}\r\n \r\ndouble tiley2lat(int y, int z) \r\n{\r\n\tdouble n = M_PI - 2.0 * M_PI * y \/ pow(2.0, z);\r\n\treturn 180.0 \/ M_PI * atan(0.5 * (exp(n) - exp(-n)));\r\n}\r\n\r\nint main() {\r\n  cout << long2tilex(-0.09,13) << endl;\r\n  cout << lat2tiley(51.505,13) << endl;\r\n}\r\n<\/pre>\n
Some data sources I’ve been thinking about look at.<\/p>\n
OSM Data:
\nhttp:\/\/planet.openstreetmap.org\/<\/p>\n
Oil GIS Data:
\nhttps:\/\/www.gov.uk\/oil-and-gas-offshore-maps-and-gis-shapefiles#offshore-gis-data<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve been looking at Javascript, googlemap-like maps. It seems that these are called “slippy maps”. There’s some useful information of the Openstreetmap wiki here. They recommend a few Javascript libraries, including LeafletJS and OpenLayers. I tried OpenLayers first, but it’s pretty big, just to get the examples working from github I’d need node.js\/JVM etc… I […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-1497","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1RRoU-o9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/comments?post=1497"}],"version-history":[{"count":5,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1497\/revisions"}],"predecessor-version":[{"id":2369,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1497\/revisions\/2369"}],"wp:attachment":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/media?parent=1497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/categories?post=1497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/tags?post=1497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}