<!doctype html> <html lang='en'> <head> <meta charset='UTF-8'> <title>GeoJson</title> <link rel='stylesheet' href='../../iwmlib/lib/3rdparty/highlight/styles/default.css'> <link rel='stylesheet' href='../../iwmlib/lib/../css/doctest.css'> <script src='../../iwmlib/lib/3rdparty/highlight/highlight.pack.js'></script> <script src='../../iwmlib/lib/3rdparty/all.js'></script> <script src='../../iwmlib/lib/all.js'></script> <script src='../../iwmlib/lib/pixi/all.js'></script> <script src="../all.js"></script> <style> @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.woff) format('woff'), url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .inline-showcase { display: flex } .map-example { display: inline-block; width: 256px; margin: 5px; } table { border-radius: 3px; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5); color: white; background: #333; padding: 40px; margin: 20px auto; box-sizing: border-box; } thead td { border-bottom: 1px solid white; } td { padding: 5px; } span.implemented { content: ""; color: greenyellow } span:before { font-size: 1.5em; } span.implemented:before { font-family: "Material Icons"; content: 'check'; width: 32px; height: 32px; } span.not-implemented { color: tomato; } span.not-implemented:before { font-family: "Material Icons"; content: 'close'; } </style> </head> <body onload='Doctest.run()'> <h1>GeoJson</h1> <p>GeoJson is a standardized format of how to display geometry in a geographical context, using latitude/longitude pairs to display one (or multiple) Point, Line or Polygon. </p> <p> This implementation is roughly based on <a class="external" href="https://tools.ietf.org/html/rfc7946">RFC7946</a>. </p> <p>GeoJson objects consist of two objects: <ul> <li>type: The type of the object. All listed in the table below.</li> <li>coordinates: The coordinate point(s)* of which the object is composed.</li> </ul> The points are an array of exactly two values in the format [longitude, latitude]. Here the implementation breaks with the standardized format, as multiple point formats can be used for convenience (see <a href="#point">Point</a> section). </p> <table> <thead> <tr> <td>Type</td> <td>Implemented</td> </tr> </thead> <tbody> <tr> <td>Point</td> <td> <span class="implemented"></span> </td> </tr> <tr> <td>Line</td> <td> <span class="implemented"></span> </td> </tr> <tr> <td>Polygon</td> <td> <span class="implemented"></span> </td> </tr> <tr> <td>MultiPoint</td> <td> <span class="not-implemented"></span> </td> </tr> <tr> <td>MultiLine</td> <td> <span class="not-implemented"></span> </td> </tr> <tr> <td>MultiPolygon</td> <td> <span class="implemented"></span> </td> </tr> </tbody> </table> </ul> <canvas id="canv_0"></canvas> <script> // As map an image of europe is used. let europe = "../../../../var/examples/maps/europe/europe.jpg" let europeMapProjection = new MapProjection(MERCATOR, { clip: { min: { x: 32.863294, y: -18.58 }, max: { x: 57.467973, y: 44.277158 } } }) let app = window.app = new MapApp({ debug: true, view: canv_0, focus: { x: 46.053113042094864, y: 13.150212801583365 }, zoom: 0.25, width: 880, height: 512, coordsLogging: true }) // The sprites of image maps should be loaded by the // apps resources loader. app.loadTextures([europe], (textures) => ready(textures), { resolutionDependent: false }) window.readyHandler = new EventHandler("onReady") function ready(textures) { let europeMap = new ImageMap(new PIXI.Sprite(textures.get(europe)), europeMapProjection) app.setMap("germany", europeMap) app.setup().run() readyHandler.call() } </script> <h2 id="point">Point</h2> <p>Points represent a single point on the map. In the following all valid coordinate types are shown</p> <script class="doctest"> let geoJsonPoint = [ { //Madrid - only valid GeoJson format. "type": "Point", "coordinates": [-3.701517, 40.417485] }, { //London - most clean version. "type": "Point", "coordinates": { "latitude": 51.508271, "longitude": -0.128505 } }, { //Wien - short version. "type": "Point", "coordinates": { "lat": 48.212156, "lng": 16.377807 } }, { //Athens - PIXI point in form {x: latitude, y: longitude}. "type": "Point", "coordinates": { "x": 37.971782, "y": 23.726510 } } ] </script> <h2>Line</h2> <p>The line can be used to show a path or connection between multiple points.</p> <script class="doctest"> const places = { "Madrid": [-3.701517, 40.417485], "London": [-0.128505, 51.508271], "Wien": [16.377807, 48.212156], "Athens": [23.726510, 37.971782], } let geoJsonLine = { "type": "LineString", "coordinates": [ places.Madrid, places.London, places.Wien, places.Athens ] } </script> <h2>Polygon</h2> <p>Polygons are used to represent shapes. They are an array of two pointarrays. The first represent the shape, the optional second one a hole that can be cut into the shape.</p> <script class="doctest"> let geoJsonPolygon = { "type": "Polygon", "coordinates": [ [ [14.220297, 53.948800], [14.098276, 52.869102], [14.792306, 50.835383], [12.267321, 50.160485], [13.864702, 48.732998], [12.957140, 47.509061], [10.222090, 47.331850], [7.615329, 47.578565], [8.240349, 48.981837], [6.431923, 49.474461], [6.521907, 49.810873], [5.998715, 51.837875], [7.012748, 52.396167], [7.294660, 53.673047], [8.979846, 53.896205], [8.644994, 54.895603], [9.917260, 54.808699], [11.042638, 53.970400], [13.226022, 54.471929] ], [ [12.364498326583373, 49.348267001730406], [12.364498326583373, 48.653439624053], [6.8644970015833735, 49.734852799255926,], [6.929973207833399, 50.49886609496484,] ] ] } </script> <h2>MultiPolygon</h2> <p>Multipolygons are an array of polygons.</p> <script class="doctest"> let geoJsonMultiPolygon = { "type": "MultiPolygon", "coordinates": [ [ [ [2.4534564721784875, 39.602018178422234], [3.2148986405775872, 39.944805466067685], [3.589576532964429, 39.73370002861697], [3.1967690651395344, 39.30481714119756], [2.9066958581303197, 39.389861165290846], [2.870436707254214, 39.55963858264072] ] ], [ [ [1.4261138640210334, 39.02533795687074], [1.6497119610906168, 39.12020148440332], [1.7645326055317128, 39.02293427288866], [1.5651072757129327, 38.877400666886004], [1.3898547131448993, 38.867887468083474], [1.3838115213322055, 38.972462606739654], [1.456329823084502, 38.9629621453345] ] ], [ [ [3.9340384662878307, 40.04714135355371], [3.970297617163993, 39.93948536023678], [4.109291028855864, 39.93011595102749], [4.399364235865022, 39.817583017567095], [4.405407427677716, 39.92543076543482], [4.254327632360457, 40.06584681024191], [3.9642544253512995, 40.06117092743255] ] ] ] } </script> <h2>Applying GeoJson Objects to the Map</h2> <p>The GeoJson data is used to create a <a href="./geographics.html" target="_blank">GeoGraphics</a> object.</p> <script class="doctest"> readyHandler.add(() => { // For this demo, we bundle all GeoJson types. let geographics = [].concat(geoJsonMultiPolygon, geoJsonPolygon, geoJsonLine, geoJsonPoint) // We need a geoLayer for the GeoGraphics to live on. // (Currently not working with the MapLayer itself. SO: 13-06-2018) let geoJsonLayer = new GeoLayer("GeoJson Layer") app.mapLayer.place(geoJsonLayer) // Add all items individually. geographics.forEach(geoJson => { const type = geoJson.type const geometry = geoJson.coordinates console.log(type, geometry) // Converts all points to PIXI format. let coordinates = GeoJson.validateAndConvert(type, geometry) console.log("Converted: ", type, geometry) // Use a Utils function to get an appropriate GeoGraphics for every type. let graphics = GeoUtils.fromGeoJsonToGeoGraphics(type, coordinates, { //The GeoGraphics shoul onDraw: GeoJson.isLineType(type) ? function () { this.graphics.lineStyle(10, 0x00FFFF) } : function () { this.graphics.beginFill(0xFF0000, 0.8) if (type == "MultiPolygon") { this.graphics.drawCircle(0, 0, 200) } else if (type == "Point") { this.graphics.drawCircle(0, 0, 50) } this.graphics.beginFill(0x00FF00) } }) // Finally place the GeoGraphics element. geoJsonLayer.place(graphics) }) geoJsonLayer.adapt() }) </script> </body> </html>