I would like to be able to draw some features on the map generated by the QGIS2web plugin.
I found some Openlayers drawing plugin here:
https://cdn.rawgit.com/HamHamFonFon/ol3-drawFeatures/82f29a3f/examples/basic_use.html
But I don't know how to combine them together with my existing map.
I tried to plot the drawing variables in my map (the qgis2web.js file).
where between the following code:
var layerSwitcher = new ol.control.LayerSwitcher({tipLabel: "Layers"});
map.addControl(layerSwitcher);
var searchLayer = new SearchLayer({
layer: lyr_Chamberspoles_2,
colName: 'Object',
zoom: 18,
collapsed: true,
map: map
});
map.getView().fit([-22418.727413, 6814717.343345, -21916.579134, 6815076.983154], map.getSize());
I plotted something like this:
var layerSwitcher = new ol.control.LayerSwitcher({tipLabel: "Layers"});
map.addControl(layerSwitcher);
var searchLayer = new SearchLayer({
layer: lyr_Chamberspoles_2,
colName: 'Object',
zoom: 18,
collapsed: true,
map: map
});
map.addControl(searchLayer);
document.getElementsByClassName('search-layer')[0]
.getElementsByTagName('button')[0].className +=
' fa fa-binoculars';
var vector_draw = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
var options = {
"popup_form" : false,
"draw": {
"Point": true,
"LineString": true,
"Square": true,
"Circle": true,
"Polygon": true
}
};
var buttonsDrawControls = new ol.control.ControlDrawFeatures(vector_draw, options);
map.addControl(buttonsDrawControls);
map.getView().fit([-22418.727413, 6814717.343345, -21916.579134, 6815076.983154], map.getSize());
My map disappeared.
The full qgis2web.js file is here:
https://jsfiddle.net/641jnc3y/
My current map looks like this:
where I have some options:
- geolocation
- measurement tool
- search
could be possible to include an option for shape drawing?
Thanks
UPDATE:
Now I am basing on the following example:
https://openlayers.org/en/latest/examples/draw-features.html?q=draw
and I would like to do something like in the thread below:
https://gis.stackexchange.com/questions/263626/drawing-shapes-and-features-in-openlayers-4
where I picked up the code from the link below:
https://jsfiddle.net/jelle002/qh1npzet/
I've placed the <form> in my index.html page
and I found the drawing section in the qgis2web.js file
var draw; // global so we can remove it later
function addInteraction() {
var type = 'LineString';
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (type),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.7)'
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
})
})
});
and tried to combine it with the main.js file.
Finally, I got something like this:
var draw; // global so we can remove it later
function addInteraction() {
var typeSelect = document.getElementById('type');
var value = typeSelect.value;
if (value === 'None'){
} else {
var geometryFunction;
if(value !== 'None' && value !== 'Square' && value !== 'Box') {
console.log(value)
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
});
} else if(value === 'Square'){
console.log(value)
value = 'Circle';
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (value),
geometryFunction: geometryFunction
});
} else if(value === 'Box'){
console.log(value)
value = 'Circle';
geometryFunction = ol.interaction.Draw.createBox();
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (value),
geometryFunction: geometryFunction
});
};
map.addInteraction(draw)
};
typeSelect.onchange = function () {
map.removeInteraction(draw);
addInteraction();
};
/*addInteraction();*/
var type = 'LineString';
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (type),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 0.7)'
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
})
})
});
/var typeSelect = document.getElementById('type');/
It comes with the shapes, but I can't stop it.
I tried also something like this:
if (value === 'None'){
null
} else {
var geometryFunction;
but it doesn't help either
and console says:
**Uncaught TypeError: Cannot read property 'get' of null
at qgis2web.js:381
at h (Map.js:92)
at VectorLayer.js:276
at p (ExecutorGroup.js:176)
at t.execute_ (Executor.js:694)
at t.executeHitDetection (Executor.js:803)
at t.forEachFeatureAtCoordinate (ExecutorGroup.js:201)
at e.forEachFeatureAtCoordinate (VectorLayer.js:267)
at e.forEachFeatureAtCoordinate (Map.js:123)
at e.forEachFeatureAtPixel (PluggableMap.js:489)**
