Skip to content

Instantly share code, notes, and snippets.

@brancusi
Last active April 1, 2017 19:36
Show Gist options
  • Save brancusi/0562c12cf1a23aea6a32b97c005ecdc6 to your computer and use it in GitHub Desktop.
Save brancusi/0562c12cf1a23aea6a32b97c005ecdc6 to your computer and use it in GitHub Desktop.
Working geoJson layer
export default Ember.Controller.extend({
lat: 33.96216,
lng: -118.31994,
zoom: 9,
currentJSON: JSON.parse('{"type":"FeatureCollection","features":[{"type":"LineString","coordinates":[[-118.31688,34.16942],[-118.30261,34.16875],[-118.28137,34.15103],[-118.26762,34.1137],[-118.22011,34.07866],[-118.21414,34.0516],[-118.22143,34.03424],[-118.21818,34.0296],[-118.1611,34.01114],[-118.09906,33.94473],[-118.10456,33.9223],[-118.10417,33.88213],[-118.08153,33.82105],[-118.08181,33.80344],[-118.09189,33.78329],[-118.089,33.77657],[-118.04017,33.77365],[-117.94881,33.70121],[-117.91615,33.68811],[-117.86672,33.68662],[-117.9159,33.68831],[-117.94878,33.70149],[-118.04055,33.77411],[-118.0886,33.77662],[-118.08139,33.82309],[-118.10327,33.87911],[-118.10516,33.90368],[-118.10364,33.92614],[-118.09553,33.94078],[-118.16049,34.01089],[-118.21912,34.03218],[-118.21389,34.05133],[-118.22019,34.07915],[-118.26708,34.11347],[-118.28215,34.15209],[-118.30274,34.15658],[-118.32612,34.15411],[-118.32953,34.16115],[-118.31688,34.16942]]}]}'),
geoJSON1: JSON.parse('{"type":"FeatureCollection","features":[{"type":"LineString","coordinates":[[-118.31688,34.16942],[-118.30261,34.16875],[-118.28137,34.15103],[-118.26762,34.1137],[-118.08153,33.82105],[-118.08181,33.80344],[-118.09189,33.78329],[-118.089,33.77657],[-118.04017,33.77365],[-117.94881,33.70121],[-117.91615,33.68811],[-117.86672,33.68662],[-117.84639,33.67752],[-117.84603,33.6723],[-117.8421,33.67736],[-117.86597,33.68675],[-117.9159,33.68831],[-117.94878,33.70149],[-118.04055,33.77411],[-118.0886,33.77662],[-118.08139,33.82309],[-118.10327,33.87911],[-118.10516,33.90368],[-118.10364,33.92614],[-118.09553,33.94078],[-118.16049,34.01089],[-118.21912,34.03218],[-118.21389,34.05133],[-118.22019,34.07915],[-118.26708,34.11347],[-118.28215,34.15209],[-118.30274,34.15658],[-118.32612,34.15411],[-118.32953,34.16115],[-118.31688,34.16942]]}]}'),
//This is identical to the previous json
geoJSON2: JSON.parse('{"type":"FeatureCollection","features":[{"type":"LineString","coordinates":[[-118.31686,34.16942],[-118.30261,34.16875],[-118.28137,34.15103],[-118.26762,34.1137],[-118.22011,34.07866],[-118.21414,34.0516],[-118.22143,34.03424],[-118.21818,34.0296],[-118.1611,34.01114],[-118.09906,33.94473],[-118.10456,33.9223],[-118.10417,33.88213],[-118.08153,33.82105],[-118.08181,33.80344],[-118.09189,33.78329],[-118.089,33.77657],[-118.04017,33.77365],[-117.94881,33.70121],[-117.91615,33.68811],[-117.86672,33.68662],[-117.84639,33.67752],[-117.84603,33.6723],[-117.8421,33.67736],[-117.86597,33.68675],[-117.9159,33.68831],[-117.94878,33.70149],[-118.04055,33.77411],[-118.0886,33.77662],[-118.32612,34.15411],[-118.32953,34.16115],[-118.31688,34.16942]]}]}'),
actions: {
updateJsonTo1() {
this.set("currentJSON", this.get("geoJSON1"));
},
updateJsonTo2() {
this.set("currentJSON", this.get("geoJSON2"));
}
}
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.leaflet-container {
width: 100%;
height: 300px;
font-family: inherit;
}
<h2>Click the button below to trigger the GeoJson prop to get updated</h2>
<p>Notice that even though it is the same valid GeoJSON, it doesn't display</p>
{{#leaflet-map lat=lat lng=lng zoom=zoom}}
{{tile-layer url="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}
{{geojson-layer geoJSON=currentJSON}}
{{/leaflet-map}}
<button {{action 'updateJsonTo1'}}>Click To Update 1</button>
<button {{action 'updateJsonTo2'}}>Click To Update 2</button>
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1",
"ember-leaflet": "3.0.9"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment