I got the plugin to work with Toms help and now I need some help with OL3 code, I know the issue that is going on but I cant get it to work, because I dont know how OL3 code works or that much code in general. I have attached all the code from the export and I need 2 layers to load in first, the 2 layers are West Virginia then Mon. National Forest. Any help would be great to get them to load first! And I believe I did the whole code thing right, if I didnt I am sorry
html, body { height: 100%; padding: 0; margin: 0; font-family: sans-serif; font-size: small; } #map { width: 100%; height: 100%; } .ol-popup { display: none; position: absolute; background-color: white; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2); -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; height: auto; width: auto; min-width: 100px; } .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; } .ol-popup-closer:after { content: "X"; }
var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); closer.onclick = function() { container.style.display = 'none'; closer.blur(); return false; }; var overlayPopup = new ol.Overlay({ element: container });
var map = new ol.Map({ controls: ol.control.defaults().extend([ new ol.control.LayerSwitcher({tipLabel: "Layers"}) ]), target: document.getElementById('map'), renderer: 'canvas', overlays: [overlayPopup], layers: layersList, view: new ol.View({ extent: [-9197567.868845, 4465939.402999, -8644818.454006, 4952261.250502], maxZoom: 28, minZoom: 1 }) }); map.getView().fitExtent([-9197567.868845, 4465939.402999, -8644818.454006, 4952261.250502], map.getSize()); var NO_POPUP = 0 var ALL_FIELDS = 1 popupLayers = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,"County",1,"WILD","Name"]; var featureOverlay = new ol.FeatureOverlay({ map: map, style: [new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#f00', width: 1 }), fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.1)' }), })] }); var doHighlight = false; var doHover = false; var highlight; var onPointerMove = function(evt) { if (!doHover && !doHighlight){ return; } var pixel = map.getEventPixel(evt.originalEvent); var coord = evt.coordinate; var popupField; var popupText = ''; var currentFeature; var currentFeatureKeys; map.forEachFeatureAtPixel(pixel, function(feature, layer) { currentFeature = feature; currentFeatureKeys = currentFeature.getKeys(); var field = popupLayers[layersList.indexOf(layer) - 1]; if (field == NO_POPUP){ } else if (field == ALL_FIELDS){ for ( var i=0; i
html, body { height: 100%; padding: 0; margin: 0; font-family: sans-serif; font-size: small; } #map { width: 100%; height: 100%; } .ol-popup { display: none; position: absolute; background-color: white; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2); -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; height: auto; width: auto; min-width: 100px; } .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; } .ol-popup-closer:after { content: "X"; }
var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); closer.onclick = function() { container.style.display = 'none'; closer.blur(); return false; }; var overlayPopup = new ol.Overlay({ element: container });
var map = new ol.Map({ controls: ol.control.defaults().extend([ new ol.control.LayerSwitcher({tipLabel: "Layers"}) ]), target: document.getElementById('map'), renderer: 'canvas', overlays: [overlayPopup], layers: layersList, view: new ol.View({ extent: [-9197567.868845, 4465939.402999, -8644818.454006, 4952261.250502], maxZoom: 28, minZoom: 1 }) }); map.getView().fitExtent([-9197567.868845, 4465939.402999, -8644818.454006, 4952261.250502], map.getSize()); var NO_POPUP = 0 var ALL_FIELDS = 1 popupLayers = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,"County",1,"WILD","Name"]; var featureOverlay = new ol.FeatureOverlay({ map: map, style: [new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#f00', width: 1 }), fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.1)' }), })] }); var doHighlight = false; var doHover = false; var highlight; var onPointerMove = function(evt) { if (!doHover && !doHighlight){ return; } var pixel = map.getEventPixel(evt.originalEvent); var coord = evt.coordinate; var popupField; var popupText = ''; var currentFeature; var currentFeatureKeys; map.forEachFeatureAtPixel(pixel, function(feature, layer) { currentFeature = feature; currentFeatureKeys = currentFeature.getKeys(); var field = popupLayers[layersList.indexOf(layer) - 1]; if (field == NO_POPUP){ } else if (field == ALL_FIELDS){ for ( var i=0; i