I'm incredibly frustrated with this because I've looked at several tutorials and nothing seems to work.
This is my index.html:
GeoJSON Rules!
This is my script_blank.js:
var map = L.map('map',{ center: [51.0486,-114.0708], zoom: 12});L.tileLayer('https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiMXNhYWMiLCJhIjoiOTdhNmU3MmZiMzJkNjM1MWVlODEzYzQ4OGIxZTZlYmQifQ.DF8z9mTl5wxqJjDQweVgVA',{attribution:"Mapbox"}).addTo(map);function popup (feature, layer) { layer.bindPopup("Hi, I'm an info window
"); layer.setIcon(teardrop)};L.geoJson(electoral_districts,{ onEachFeature: popup}).addTo(map);This is my style.css:
html, body, #map{ height: 100%; width: 100%; font-family: 'Oswald', sans-serif;}This is a quick sample of my electoral_districts.json (it is quite large so I won't post the whole thing:
var electoral_districts = {"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"urn
gc:def:crs:EPSG::4269"}},"features":[{"type":"Feature","properties":{"NID":"{B0A17501-2D8B-4912-AAA1-C9CE1ACC6327}","FEDNUM":48010,"ENNAME":"Calgary Rocky Ridge","FRNAME":"Calgary Rocky Ridge","PROVCODE":"AB","CREADT":"20131005","REVDT":null,"REPORDER":"2013","DECPOPCNT":108901,"QUIPOPCNT":0,"ENLEGALDSC":"http://www.elections.ca/res/cir/maps2/mapprov.asp?map=48010&lang=e#descrip","FRLEGALDSC":"http://www.elections.ca/res/cir/maps2/mapprov.asp?map=48010&lang=f#descrip"},"geometry":{"type":"Polygon","coordinates":[[[-114.31554367713058,51.1401662952405],[-114.29635385527094,51.14000607924823],[-114.2963938613125,51.13952485080885],[-114.29795848547484,51.1396345701822],[-114.29825218433548,51.13848779082561],[-114.29641948793397,51.13810305001816],[-114.29402134884599,51.13656817732598],[-114.29104518186756,51.13599450155906],[-114.29100186168101,51.135986161942746],[-114.28989156752392,51.132804771416346],[-114.2900670434117,51.13053932289534],[-114.28841034772711,51.127889017245465],[-114.28607275177437,51.126272779378915],[-114.28399781603892,51.125472143690764],[-114.28088353653033,51.1257499000797],[-114.28088402436381,51.12566000073502],[-114.28088448778936,51.125570134639815],[-114.2808849370178,51.12548024427985],[-114.28088543903985,51.12539036930394],[-114.28088588826412,51.12530047899601],[-114.28088635168136,51.12521061300481],[-114.28088683950195,51.125120713816194],[-114.28088730291492,51.125030847876985],[-114.28088769931618,51.12494949076354],[-114.28088792714036,51.1248595966651],[-114.28088813055825,51.124769735816045],[-114.28088831978053,51.12467985070229],[-114.28088850900194,51.12458996561457],[-114.2808886982225,51.124500080552814],[-114.28088894023652,51.12441021087512],...I drop index.html into a browser and I just get a blank map. I have no other clues as to what is wrong... Can anybody help?
أكثر...
This is my index.html:
GeoJSON Rules!
This is my script_blank.js:
var map = L.map('map',{ center: [51.0486,-114.0708], zoom: 12});L.tileLayer('https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiMXNhYWMiLCJhIjoiOTdhNmU3MmZiMzJkNjM1MWVlODEzYzQ4OGIxZTZlYmQifQ.DF8z9mTl5wxqJjDQweVgVA',{attribution:"Mapbox"}).addTo(map);function popup (feature, layer) { layer.bindPopup("Hi, I'm an info window
"); layer.setIcon(teardrop)};L.geoJson(electoral_districts,{ onEachFeature: popup}).addTo(map);This is my style.css:
html, body, #map{ height: 100%; width: 100%; font-family: 'Oswald', sans-serif;}This is a quick sample of my electoral_districts.json (it is quite large so I won't post the whole thing:
var electoral_districts = {"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"urn
gc:def:crs:EPSG::4269"}},"features":[{"type":"Feature","properties":{"NID":"{B0A17501-2D8B-4912-AAA1-C9CE1ACC6327}","FEDNUM":48010,"ENNAME":"Calgary Rocky Ridge","FRNAME":"Calgary Rocky Ridge","PROVCODE":"AB","CREADT":"20131005","REVDT":null,"REPORDER":"2013","DECPOPCNT":108901,"QUIPOPCNT":0,"ENLEGALDSC":"http://www.elections.ca/res/cir/maps2/mapprov.asp?map=48010&lang=e#descrip","FRLEGALDSC":"http://www.elections.ca/res/cir/maps2/mapprov.asp?map=48010&lang=f#descrip"},"geometry":{"type":"Polygon","coordinates":[[[-114.31554367713058,51.1401662952405],[-114.29635385527094,51.14000607924823],[-114.2963938613125,51.13952485080885],[-114.29795848547484,51.1396345701822],[-114.29825218433548,51.13848779082561],[-114.29641948793397,51.13810305001816],[-114.29402134884599,51.13656817732598],[-114.29104518186756,51.13599450155906],[-114.29100186168101,51.135986161942746],[-114.28989156752392,51.132804771416346],[-114.2900670434117,51.13053932289534],[-114.28841034772711,51.127889017245465],[-114.28607275177437,51.126272779378915],[-114.28399781603892,51.125472143690764],[-114.28088353653033,51.1257499000797],[-114.28088402436381,51.12566000073502],[-114.28088448778936,51.125570134639815],[-114.2808849370178,51.12548024427985],[-114.28088543903985,51.12539036930394],[-114.28088588826412,51.12530047899601],[-114.28088635168136,51.12521061300481],[-114.28088683950195,51.125120713816194],[-114.28088730291492,51.125030847876985],[-114.28088769931618,51.12494949076354],[-114.28088792714036,51.1248595966651],[-114.28088813055825,51.124769735816045],[-114.28088831978053,51.12467985070229],[-114.28088850900194,51.12458996561457],[-114.2808886982225,51.124500080552814],[-114.28088894023652,51.12441021087512],...I drop index.html into a browser and I just get a blank map. I have no other clues as to what is wrong... Can anybody help?أكثر...