Update data flow of Simple Point tutorial
MODIFY
tutorials/simple_point/index.pug
tutorials/simple_point/index.pug
@@ -13,7 +13,14 @@ block mainTutorial
});
map.createLayer('osm');
- var cities = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-74.0059413,40.7127837]},"properties":{"name":"New York","population":"8405837"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-118.2436849,34.0522342]},"properties":{"name":"Los Angeles","population":"3884307"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-87.6297982,41.8781136]},"properties":{"name":"Chicago","population":"2718782"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-95.3698028,29.7604267]},"properties":{"name":"Houston","population":"2195914"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-75.1652215,39.9525839]},"properties":{"name":"Philadelphia","population":"1553165"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-112.0740373,33.4483771]},"properties":{"name":"Phoenix","population":"1513367"}}]};
+ var cities = [
+ {lon: -74.0059413, lat: 40.7127837, name: "New York", population: 8405837},
+ {lon: -118.2436849, lat: 34.0522342, name: "Los Angeles", population: 3884307},
+ {lon: -87.6297982, lat: 41.8781136, name: "Chicago", population: 2718782},
+ {lon: -95.3698028, lat: 29.7604267, name: "Houston", population: 2195914},
+ {lon: -75.1652215, lat: 39.9525839, name: "Philadelphia", population: 1553165},
+ {lon: -112.0740373, lat: 33.4483771, name: "Phoenix", population: 1513367}
+ ];
:markdown-it
We create a layer first.
@@ -27,21 +34,23 @@ block mainTutorial
+codeblock('javascript', 3, undefined, true).
var feature = layer.createFeature('point')
- .data(cities.features)
+ .data(cities)
.position(function (city) {
return {
- x: city['geometry']['coordinates'][0],
- y: city['geometry']['coordinates'][1]
+ x: city.lon,
+ y: city.lat
};
})
.draw();
:markdown-it
- We can also use GeoJSON reader to create the point feature.
+ We can also use GeoJSON and the GeoJSON reader to create the point feature.
+codeblock('javascript', 10, 2, false, 'Step 3-B').
+ var geojsonCities = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-74.0059413,40.7127837]},"properties":{"name":"New York","population":"8405837"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-118.2436849,34.0522342]},"properties":{"name":"Los Angeles","population":"3884307"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-87.6297982,41.8781136]},"properties":{"name":"Chicago","population":"2718782"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-95.3698028,29.7604267]},"properties":{"name":"Houston","population":"2195914"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-75.1652215,39.9525839]},"properties":{"name":"Philadelphia","population":"1553165"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-112.0740373,33.4483771]},"properties":{"name":"Phoenix","population":"1513367"}}]};
+
var reader = geo.createFileReader('jsonReader', { 'layer': layer });
- reader.read(cities, function (features) {
+ reader.read(geojsonCities, function (features) {
features[0].draw();
// Or we can draw the whole map
// map.draw();

Update data flow of Simple Point tutorial