Recently diving into Meteor, I am on a mission to create my own customized version of this impressive example from leaflet incorporated into Meteor: Interactive Choropleth Map
The implementation requires the use of this GeoJson Data file: us-states
The obstacle before me is: dealing with the import and rendering of this file.
My Approach:
Template.map.rendered = function() {
var map = L.map('map').setView([37.8, -96], 5);
L.tileLayer.provider('Stamen.Watercolor').addTo(map);
HTTP.get(Meteor.absoluteUrl("/us-states.js"), function(err,result) {
var statesData = result.content;
console.log(statesData);
var myStyle = {
"fillColor": "#487ba1",
"weight": 3,
"opacity": 1,
"color": "#487ba1",
"fillOpacity": 0.1
};
var statesLayer = L.geoJson(statesData, {
style: myStyle
}).addTo(map);
});
}#map {
width: 100%;
height: 100%;
}<div id="column">
{{> map}}
</div>
<template name="map">
<div id='map'></div>
</template>The Outcome: Uncaught Error: Invalid GeoJSON object.
The variable "stateData" seems to be returning as an object. My objective here is plain - display the GeoJson data on the map. This would usually be easy on traditional html. What aspect might I be missing in getting this to operate smoothly?