diff options
Diffstat (limited to 'app/assets/javascripts/repository/components/blob_viewers/geo_json/utils.js')
-rw-r--r-- | app/assets/javascripts/repository/components/blob_viewers/geo_json/utils.js | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/app/assets/javascripts/repository/components/blob_viewers/geo_json/utils.js b/app/assets/javascripts/repository/components/blob_viewers/geo_json/utils.js new file mode 100644 index 00000000000..615f7fd2b47 --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_viewers/geo_json/utils.js @@ -0,0 +1,47 @@ +import { map, tileLayer, geoJson, featureGroup, Icon } from 'leaflet'; +import { template, each } from 'lodash'; +import { + OPEN_STREET_TILE_URL, + MAP_ATTRIBUTION, + OPEN_STREET_COPYRIGHT_LINK, + ICON_CONFIG, + POPUP_CONTENT_TEMPLATE, +} from './constants'; + +const generateOpenStreetMapTiles = () => { + const attribution = `${MAP_ATTRIBUTION} ${OPEN_STREET_COPYRIGHT_LINK}`; + return tileLayer(OPEN_STREET_TILE_URL, { attribution }); +}; + +export const popupContent = (popupProperties) => { + return template(POPUP_CONTENT_TEMPLATE)({ + eachFunction: each, + popupProperties, + }); +}; + +const loadGeoJsonGroupAndBounds = (geoJsonData) => { + const layers = []; + const geoJsonGroup = geoJson(geoJsonData, { + onEachFeature: (feature, layer) => { + layers.push(layer); + if (feature.properties) { + layer.bindPopup(popupContent(feature.properties)); + } + }, + }); + + return { geoJsonGroup, bounds: featureGroup(layers).getBounds() }; +}; + +export const initLeafletMap = (el, geoJsonData) => { + if (!el || !geoJsonData) return; + + import('leaflet/dist/leaflet.css'); + Icon.Default.mergeOptions(ICON_CONFIG); + const leafletMap = map(el, { layers: [generateOpenStreetMapTiles()] }); + const { bounds, geoJsonGroup } = loadGeoJsonGroupAndBounds(geoJsonData); + + geoJsonGroup.addTo(leafletMap); + leafletMap.fitBounds(bounds); +}; |