Use a style to control look and feel
This commit is contained in:
2
map-generator/dist/main.js
vendored
2
map-generator/dist/main.js
vendored
@@ -16,7 +16,7 @@
|
||||
\****************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var polylabel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! polylabel */ \"./node_modules/polylabel/polylabel.js\");\n\r\n\r\nfunction normaliseCouncilName(str) {\r\n const regex = /(.*?)(?:(?: Rural)?(?: City| Shire) Council)/g;\r\n const matches = str.matchAll(regex);\r\n\r\n // If we get a match, convert to slug format\r\n for (const match of matches) {\r\n return match[1].toLowerCase().replace(\" \", \"-\");\r\n }\r\n\r\n // If we didn't find any matches, try convert input to slug format\r\n return str.toLowerCase().replace(\" \", \"-\");\r\n};\r\n\r\nconst searchParams = new URLSearchParams(window.location.search);\r\nconst councilName = normaliseCouncilName(searchParams.get(\"council\"));\r\nconsole.log(councilName);\r\n\r\nmapboxgl.accessToken = 'pk.eyJ1IjoibWF0dHl3YXkiLCJhIjoiY2x6eG9vMzZyMHY2cDJqb3M1ODZnNjF4cyJ9.IX8CfYQZUaQhSjWgMXmsEA';\r\nconst map = new mapboxgl.Map({\r\n container: 'map',\r\n zoom: 10,\r\n center: [145.00724,-37.79011]\r\n});\r\n\r\nmap.addControl(new mapboxgl.NavigationControl());\r\n\r\nfetch(\"wards_withboundaries.json\")\r\n .then(response => {\r\n response.json()\r\n .then((wardData) => {\r\n const filteredWardData = wardData.filter((ward) => normaliseCouncilName(ward.parentElectorateName) == councilName);\r\n\r\n filteredWardData.forEach(wardData => {\r\n const featureCollection = {\r\n 'type': 'FeatureCollection',\r\n 'features': [\r\n {\r\n 'type': 'Feature',\r\n 'geometry': JSON.parse(wardData.boundaryJson)\r\n }\r\n ]\r\n };\r\n\r\n // Add data\r\n map.addSource(\"data_\"+wardData.electorateId, {\r\n 'type': 'geojson',\r\n 'data': featureCollection\r\n });\r\n\r\n // Add a line along the data\r\n map.addLayer({\r\n 'id': \"outline_\"+wardData.electorateId,\r\n 'type': 'line',\r\n 'source': \"data_\"+wardData.electorateId,\r\n 'layout': {},\r\n 'paint': {\r\n 'line-color': '#0899fe',\r\n 'line-width': 3\r\n }\r\n });\r\n\r\n const centrePoint = (0,polylabel__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(featureCollection.features[0].geometry.coordinates, 0.000001);\r\n\r\n map.addSource('center_'+wardData.electorateId, {\r\n 'type': 'geojson',\r\n 'data': {\r\n 'type': 'FeatureCollection',\r\n 'features': [\r\n {\r\n 'type': 'Feature',\r\n 'properties': {\r\n 'description': wardData.electorateName\r\n },\r\n 'geometry': {\r\n 'type': 'Point',\r\n 'coordinates': centrePoint\r\n }\r\n }\r\n ]\r\n }\r\n });\r\n\r\n map.addLayer({\r\n 'id': 'label_'+wardData.electorateId,\r\n 'type': 'symbol',\r\n 'source': 'center_'+wardData.electorateId,\r\n 'layout': {\r\n 'text-field': ['get', 'description'],\r\n 'text-variable-anchor': ['center', 'top', 'bottom'],\r\n 'text-justify': 'auto',\r\n 'text-allow-overlap': true\r\n }\r\n });\r\n\r\n });\r\n\r\n }).catch(err => {\r\n console.log(err);\r\n });\r\n })\r\n \r\n\r\n\r\nmap.on('style.load', () => {\r\n map.setConfigProperty('basemap', 'showPlaceLabels', false);\r\n map.setConfigProperty('basemap', 'showPointOfInterestLabels', false);\r\n map.setConfigProperty('basemap', 'showRoadLabels', false);\r\n map.setConfigProperty('basemap', 'showTransitLabels', false);\r\n map.setConfigProperty('basemap', 'show3dObjects', false);\r\n});\n\n//# sourceURL=webpack:///./src.js?");
|
||||
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var polylabel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! polylabel */ \"./node_modules/polylabel/polylabel.js\");\n\r\n\r\nfunction normaliseCouncilName(str) {\r\n const regex = /(.*?)(?:(?: Rural)?(?: City| Shire) Council)/g;\r\n const matches = str.matchAll(regex);\r\n\r\n // If we get a match, convert to slug format\r\n for (const match of matches) {\r\n return match[1].toLowerCase().replace(\" \", \"-\");\r\n }\r\n\r\n // If we didn't find any matches, try convert input to slug format\r\n return str.toLowerCase().replace(\" \", \"-\");\r\n};\r\n\r\nconst searchParams = new URLSearchParams(window.location.search);\r\nconst councilName = normaliseCouncilName(searchParams.get(\"council\"));\r\nconsole.log(councilName);\r\n\r\nmapboxgl.accessToken = 'pk.eyJ1IjoibWF0dHl3YXkiLCJhIjoiY2x6eG9vMzZyMHY2cDJqb3M1ODZnNjF4cyJ9.IX8CfYQZUaQhSjWgMXmsEA';\r\nconst map = new mapboxgl.Map({\r\n container: 'map',\r\n zoom: 10,\r\n style: 'mapbox://styles/mattyway/clzy2ozzf004k01pn840h9xdb',\r\n center: [145.00724,-37.79011]\r\n});\r\n\r\nmap.addControl(new mapboxgl.NavigationControl());\r\n\r\nfetch(\"wards_withboundaries.json\")\r\n .then(response => {\r\n response.json()\r\n .then((wardData) => {\r\n const filteredWardData = wardData.filter((ward) => normaliseCouncilName(ward.parentElectorateName) == councilName);\r\n\r\n filteredWardData.forEach(wardData => {\r\n const featureCollection = {\r\n 'type': 'FeatureCollection',\r\n 'features': [\r\n {\r\n 'type': 'Feature',\r\n 'geometry': JSON.parse(wardData.boundaryJson)\r\n }\r\n ]\r\n };\r\n\r\n // Add data\r\n map.addSource(\"data_\"+wardData.electorateId, {\r\n 'type': 'geojson',\r\n 'data': featureCollection\r\n });\r\n\r\n // Add a line along the data\r\n map.addLayer({\r\n 'id': \"outline_\"+wardData.electorateId,\r\n 'type': 'line',\r\n 'source': \"data_\"+wardData.electorateId,\r\n 'layout': {},\r\n 'paint': {\r\n 'line-color': '#0899fe',\r\n 'line-width': 3\r\n }\r\n });\r\n\r\n const centrePoint = (0,polylabel__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(featureCollection.features[0].geometry.coordinates, 0.000001);\r\n\r\n map.addSource('center_'+wardData.electorateId, {\r\n 'type': 'geojson',\r\n 'data': {\r\n 'type': 'FeatureCollection',\r\n 'features': [\r\n {\r\n 'type': 'Feature',\r\n 'properties': {\r\n 'description': wardData.electorateName\r\n },\r\n 'geometry': {\r\n 'type': 'Point',\r\n 'coordinates': centrePoint\r\n }\r\n }\r\n ]\r\n }\r\n });\r\n\r\n map.addLayer({\r\n 'id': 'label_'+wardData.electorateId,\r\n 'type': 'symbol',\r\n 'source': 'center_'+wardData.electorateId,\r\n 'layout': {\r\n 'text-field': ['get', 'description'],\r\n 'text-variable-anchor': ['center', 'top', 'bottom'],\r\n 'text-justify': 'auto',\r\n 'text-allow-overlap': true\r\n }\r\n });\r\n\r\n });\r\n\r\n }).catch(err => {\r\n console.log(err);\r\n });\r\n })\r\n \r\n\n\n//# sourceURL=webpack:///./src.js?");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
||||
Reference in New Issue
Block a user