I am trying to make a polygon editable after it is drawn with ol.interaction.Draw.When I instantiate ol.interaction.Modify I get a "b.attachEvent is not a function" error. This is the code:
drawPolygon.on("drawend",function(p)
{
setTimeout(function()
{
modifyPoligon = new ol.interaction.Modify({
features: vectorSource.getFeatures()
});
},200);
}
I also use a timeout because in the drawend call the Feature is still not in the layer, is there a better way to get a callback after the feature is drawn and on the layer?
Not sure if suits your case but here's a fiddle with a similar approach: https://jsfiddle.net/ko822xjw/
// Create a draw interaction and add it to the map:
drawInteraction = new ol.interaction.Draw({ source:vectorSource, type:"Polygon" });
map.addInteraction(drawInteraction);
// set listener on "drawend":
drawInteraction.on('drawend', function(e) {
// get drawn feature:
var feature = e.feature;
// remove draw interaction:
map.removeInteraction(drawInteraction);
// Create a select interaction and add it to the map:
selectInteraction = new ol.interaction.Select();
map.addInteraction(selectInteraction);
// select feature:
selectInteraction.getFeatures().push(feature);
// do something after drawing (e.g. saving):
// ...
// Create a modify interaction and add to the map:
modifyInteraction = new ol.interaction.Modify({ features: selectInteraction.getFeatures() });
map.addInteraction(modifyInteraction);
// set listener on "modifyend":
modifyInteraction.on('modifyend', function(evt) {
// get features:
var collection = evt.features;
// There's only one feature, so get the first and only one:
var featureClone = collection.item(0).clone();
// do something after modifying (e.g. saving):
// ...
});
});
It could be as simple as:
var
features = new ol.Collection(),
modify = new ol.interaction.Modify({
features: features
}),
vectorSource = new ol.source.Vector({
features: features
}),
vectorLayer = new ol.layer.Vector({
source: vectorSource
}),
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
}),
vectorLayer
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
}),
drawPolygon = new ol.interaction.Draw({
features: features,
type: 'Polygon'
})
;
map.addInteraction(modify);
map.addInteraction(drawPolygon);
http://jsfiddle.net/jonataswalker/r2g1atty/
Related
I am trying to offline-render a part of OpenStreetMap, previously loaded as map.osm (OSM XML). I'm starting a localhost and loading the xml from disk.
I tried to use similar example (https://openlayers.org/en/latest/examples/vector-osm.html) changing only the source to my file, yet this didn't work out. Data loaded is pretty much similar to data I see in the example.
I tried a bunch of various approaches, and I still can't render the map. I get no errors, and I can't get what I'm missing.
var vectorSource = new VectorSource({
format: new OSMXML()
});
var xml = await fetch('map.osm').then(res => res.text());
var features = (new OSMXML()).readFeatures(xml);
// Features are parsed OK
vectorSource.addFeatures(features);
var vector = new VectorLayer({
source: vectorSource,
// Using styles, I don't post them here (a lot of code)
style: function (feature) {
for (var key in styles) {
var value = feature.get(key);
if (value !== undefined) {
for (var regexp in styles[key]) {
if (new RegExp(regexp).test(value)) {
return styles[key][regexp];
}
}
}
}
return null;
}
});
map = new Map({
layers: [vector],
target: document.getElementById('map'),
view: new View({
center: [0, 0],
maxZoom: 0,
zoom: 0
})
});
I've searhced the site for this error and, while there were several answers, none of them worked for me (or weren't applicable).
I am using google maps API v3 and am trying to implement OverlappingMarkerSpiderfier to solve my problem of overlapping markers. My problem is that I cannot create an instance of an OMS:
function getStateInfo(){
//do stuff
var lat = 42.5724;
var lon = -74.948052;
var map = new google.maps.Map(document.getElementById("map"),{draggableCursor:'pointer'});
var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true});
// do more stuff
var whiteicon = new GIcon();
whiteicon.image = "images/whiteCircle.png";
whiteicon.iconSize = new GSize(11, 11);
whiteicon.iconAnchor = new GPoint(6, 6);
whiteicon.infoWindowAnchor = new GPoint(6,6);
var marker = new GMarker(new GLatLng(lat,lon), {
draggable: false,
title: ($(this).find('COMPANY_NAME').text()),
icon: whiteicon,
map: map
});
oms.addMarker(marker);
}
I get the following error:
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
I have verified that the error occurs at the time of instantiation and not at marker creation/placement. For thoroughness, here is the code I am trying to use to place markers:
var marker = new GMarker(new GLatLng(lat,long), {
draggable: false,
title: ($(this).find('COMPANY_NAME').text()),
icon: whiteicon,
map: map});
...
oms.addMarker(marker);
I have also retrieved a different copy of OMS in the event that there was something wonky with the original (downloaded from github).
If you need to see more code, just let me know what you are looking for. I just posted the lines which are the problem. My map generates properly without OMS - it's just the oms instantiation that is the problem.
You are using a deprecated Google Maps JavaScript API v2 map with a Google Maps JavaScript API v3 spiderifier.
This is v2 code (GSize, GPoint, GLatLng):
whiteicon.iconSize = new GSize(11, 11);
whiteicon.iconAnchor = new GPoint(6, 6);
var marker = new GMarker(new GLatLng(lat,lon), {
Can anybody give me a hint on how can I save the interaction drawings which I draw in openlayers 3? Can I use json for that? Can anybody provide a simple example?
Thanks!
var features = yourLayer.getSource().getFeatures();
var newForm = new ol.format.GeoJSON();
var featColl = newForm.writeFeaturesObject(features);
Then, save it to JSON:
function exportJson(featuresCollection) {
var txtArray = [];
txtArray.push(JSON.stringify(featuresCollection));
// Here I use the saveAs library to export the JSON as *.txt file
var blob = new Blob(txtArray, {type: 'text/json;charset=utf8'});
saveAs(blob, layerName + ".txt")
};
exportJson(featColl);
To load a JSON:
var vectorLayer = new ol.layer.Vector({
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: 'yourFile.json'
})
});
how can add a custom image marker in here map,
i can add markers in map by using this code:
var map, standardMarker;
map = new nokia.maps.map.Display(mapContainer, {
center: [lat, log],
zoomLevel: 12,
components: [new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.TypeSelector()]
});
standardMarker = new nokia.maps.map.StandardMarker(map.center);
map.objects.add(standardMarker);
but the problem is map contains many markers ,so i need small custom markers.
can anyone help me!?
nokia.maps are old version of the HERE map JavaScript API version 2.5, you can use new version of HERE map JS API 3.0. I recommend for new developments to use the latest 3.0 version.
https://developer.here.com/documentation
and some examples http://developer.here.com/api-explorer
/**
* Step 1: initialize communication with the platform
*/
var platform = new H.service.Platform({
app_id: hereMapAppID,
app_code: hereMapAppCode,
useHTTPS: true,
useCIT: false
});
var defaultLayers = platform.createDefaultLayers();
var mapContainer = document.getElementById('hereMapDivId');
//Step 2: initialize a map - not specificing a location will give a whole world view.
var map = new H.Map(mapContainer,
defaultLayers.normal.map,{
center: {lat: 53.430, lng: -2.961},
zoom: 7
});
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
var yourMarker = baseUrl+'/images/ico/your_marker.png';
var icon = new H.map.Icon(yourMarker);
marker = new H.map.Marker(map.center, { icon: icon });
var group = new H.map.Group();
map.addObject(group);
group.addObject(marker);
Add Custom Marker From Your System
function addMarkerToGroup(group, coordinate, html) {
var marker = new H.map.Marker(coordinate,{ icon: pngIcon });
// add custom data to the marker
marker.setData(html);
group.addObject(marker);
}
var yourMarker = '<PATH_OF_IMG/IMG_NAME>';
var pngIcon = new H.map.Icon(yourMarker, {size: {w: 56, h: 56}});
i'm using three.js revision 53
when loading a texture in Canvas Renderer (IE on Win7) and adding a callback for the onLoad event, the texture is not getting displayed. When i remove the callback function, the texture is getting displayed as expected:
// NOT WORKING with callback added
var material = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('text_build.png', {}, function()
{
//do something
})
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(135, 135), material);
plane .overdraw = true;
scene.add(plane );
// WORKING without callback
var material = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('text_build.png')
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(135, 135), material);
plane .overdraw = true;
scene.add(plane );
When running the same code in WebGL Renderer (FF,Chrome on WIn7), both examples work just fine.
Maybe someone can point me to the mistake i'm obviously doing here.
Thanks a lot.
Try this:
var material = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture( 'text_build.png', new THREE.UVMapping(), function() { ... } )
});