I need to make permanent popup but only managed to make it show when a mouse event, i found an example but nothing to adapt achievement: http://openlayers.org/dev/examples/osm-marker-popup.html
anyone can help me to make permanent the popup, Thanks.
var mapa;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.ImgPath = "/openlayers/img/"
mapa = new OpenLayers.Map('map',{
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
],
theme: null
});
var osm = new OpenLayers.Layer.OSM( " Open Street Map" );
var markers = new OpenLayers.Layer.Markers( "Ruta" );
$.each(info, function(i, data){
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('/openlayers/img/data.png',size,offset);
var lonlat = new OpenLayers.LonLat(parseFloat(data.long),parseFloat(data.lat));
var proj_1 = new OpenLayers.Projection("EPSG:4326");
var proj_2 = new OpenLayers.Projection("EPSG:900913");
var EPSG = lonlat.transform(proj_1,proj_2);
var marker = new OpenLayers.Marker(EPSG, icon);
markers.addMarker(marker);
// popup
marker.events.register("click", marker, function(e){
var popup = new OpenLayers.Popup.FramedCloud(data.idunidad,
marker.lonlat,
new OpenLayers.Size(200,200),
'<p>info in the popup, mouse event</p>',
null,true);
popup.idunidad = data.idunidad;
mapa.addPopup(popup);
arrPopup.push(popup);
});
});
var lonlat = new OpenLayers.LonLat(-74.075833,4.598056);
var proj_1 = new OpenLayers.Projection("EPSG:4326");
var proj_2 = new OpenLayers.Projection("EPSG:900913");
var centrar = lonlat.transform(proj_1,proj_2);
mapa.addLayers([osm,markers]);
mapa.setCenter(centrar, 5);
mapa.addControl(new OpenLayers.Control.LayerSwitcher());
Why not use vector layers, you know this example?
http://openlayers.org/dev/examples/dynamic-text-layer.html
Related
This is actually taken from THREEJS: add hole to rendered Shape . But it's still not working.
The error is
three.js:34206 Uncaught TypeError: Cannot read property 'concat' of undefined
var plane, vertices = [], planeShape;
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xC0C0C0});
vertices.push(
new THREE.Vector3(-room_width/2,room_depth/2,0),
new THREE.Vector3(room_width/2,room_depth/2,0),
new THREE.Vector3(room_width/2,-room_depth/2,0),
new THREE.Vector3(-room_width/2,-room_depth/2,0)
);
planeShape = new THREE.Shape(vertices);
plane = new THREE.Mesh( new THREE.ShapeGeometry(planeShape), planeMaterial);
scene.add(plane);
var holes = [
new THREE.Vector3(-room_width/4,room_depth/4,0),
new THREE.Vector3(room_width/4,room_depth/4,0),
new THREE.Vector3(room_width/4,-room_depth/4,0),
new THREE.Vector3(-room_width/4,-room_depth/4,0)
],
hole = new THREE.Path();
hole.fromPoints(holes);
var shape = new THREE.Shape(plane.geometry.vertices);
shape.holes = [hole];
var points = shape.extractPoints();
plane.geometry.faces = [];
var triangles = THREE.ShapeUtils.triangulateShape ( points.vertices, points.holes );
for( var i = 0; i < triangles.length; i++ ){
plane.geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
}
edit::: ANS
var plane, vertices = [], planeShape;
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xC0C0C0});
vertices.push(
new THREE.Vector3(-150,-150,0),
new THREE.Vector3(150,-150,0),
new THREE.Vector3(150,150,0),
new THREE.Vector3(-150,150,0)
);
planeShape = new THREE.Shape(vertices);
plane = new THREE.Mesh( new THREE.ShapeGeometry(planeShape), planeMaterial);
scene.add(plane);
var holes = [
new THREE.Vector3(-75,-75,0),
new THREE.Vector3(75,-75,0),
new THREE.Vector3(75,75,0),
new THREE.Vector3(-75,75,0)
],
hole = new THREE.Path();
hole.fromPoints(holes);
var shape = new THREE.Shape(plane.geometry.vertices);
shape.holes = [hole];
var points = shape.extractPoints();
plane.geometry.faces = [];
var triangles = THREE.ShapeUtils.triangulateShape ( points.shape, points.holes );
plane.geometry.vertices.push(
new THREE.Vector3(-75,-75,0),
new THREE.Vector3(75,-75,0),
new THREE.Vector3(75,75,0),
new THREE.Vector3(-75,75,0)
);
for( var i = 0; i < triangles.length; i++ ){
plane.geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
}
For anyone stumbling onto this, there is now a much simpler way to work with holes compared to the old "THREE.ShapeUtils.triangulateShape" and constructing the triangles yourself.
//vertices is the main shape/contour/exterior, a "ring" as a list of THREE.Vector2 instances
//holes is a list of THREE.Path instances, created from THREE.Vector2
//If you pass THREE.Vector3 then the Z property is ignored.
var shape = new THREE.Shape(vertices);
shape.holes = holes;
var geometry = new THREE.ShapeBufferGeometry( shape );
...
I am trying to find a way how to create a reusable function that prevents me from repeating the same loader code over and over again. An example can be seen below:
one = new THREE.Group();
var loader1 = new THREE.TextureLoader();
loader1.crossOrigin = '';
loader1.load('',
function (texture) {
this.geo = new THREE.BoxGeometry(10,10,10);
this.mat = new THREE.MeshBasicMaterial({color:'white'});
this.mesh = new THREE.Mesh(this.geo, this.mat);
one.add(mesh)
}
);
twp = new THREE.Group();
var loader2 = new THREE.TextureLoader();
loader2.crossOrigin = '';
loader2.load('',
function (texture) {
this.geo = new THREE.BoxGeometry(10,10,10);
this.mat = new THREE.MeshBasicMaterial({color:'white'});
this.mesh = new THREE.Mesh(this.geo, this.mat);
two.add(mesh)
}
);
My attempt was as follows:
example = new THREE.Group();
function reuse(obj) {
this.loader = new THREE.TextureLoader();
this.loader.crossOrigin = '';
this.loader.load('',
function (texture) {
this.geo = new THREE.BoxGeometry(10,10,10);
this.mat = new THREE.MeshBasicMaterial({color:'white'});
this.mesh = new THREE.Mesh(this.geo, this.mat);
obj.name.add(mesh)
}
)
};
var test = new reuse({name: 'example'});
I also tried pushing the mesh in an array within the function:
arr.push(mesh);
arr.mesh[0].position.x
etc.
I also tried returning it.
What exactly is the best and working method to avoid such disaster?
when dealing with duplicate code the most common and easiest way is to create a simple function
example with your code:
function getTexturedCube(path){
var geometry = new THREE.BoxGeometry(10,10,10);
var loader = new THREE.TextureLoader();
//you dont have to put onLoad function in,
//the texture returned will automatically update when it is loaded
var texture = loader.load(path);
var material = new THREE.MeshBasicMaterial({map:texture});
return new THREE.Mesh(geometry, material)
}
var group = new THREE.Group();
var cube1 = getTexturedCube("/path/to/image");
var cube2 = getTexturedCube("/path/to/other/image");
group.add(cube1);
group.add(cube2);
var anotherGroup = new THREE.Group();
var cube3 = getTexturedCube("/path/to/yet/another/image")
anotherGroup.add(cube3);
you can also pass the function a reference to your group and make it push the object into it
function addTexturedCube(path, object){
var geometry = new THREE.BoxGeometry(10,10,10);
var loader = new THREE.TextureLoader();
var texture = loader.load(path);
var material = new THREE.MeshBasicMaterial({map:texture});
object.add(new THREE.Mesh(geometry, material));
}
var group = new THREE.Group();
addTexturedCube("/path/to/image", group);
addTexturedCube("/path/to/other/image", group);
I have big problems with replacing an image in a if sentence. I remove the image first. But I cant place a new image when inside an if-sentence.
var image= 'garage.png';
var imageUrl = image,
imageBounds = L.latLngBounds([
[63.431004174, 10.397958755],
[63.430433118, 10.399938226]])
var map = L.mapbox.map('map', 'examples.map-i86nkdio').fitBounds(imageBounds);
var overlay = L.imageOverlay(imageUrl, imageBounds).addTo(map);
map.removeLayer(overlay);
// this is the if that appears later in the code //
function changeImages(newValue){
var slider = newValue;
if(slider < 5){
var image = 'garageAltered.png';
var imageUrl = image,imageBounds = L.latLngBounds([
[63.431004174, 10.397958755],
[63.430433118, 10.399938226]])
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
.fitBounds(imageBounds);
var overlay = L.imageOverlay(imageUrl, imageBounds).addTo(map);
}
}
I've been trying to get the openlayers label feature to work and produced the following example:
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script>
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
// Default polygon style
var polygonStyle =
OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
polygonStyle.strokeColor = "#800000";
polygonStyle.fillColor = "#800080";
polygonStyle.fillOpacity = 0.2;
polygonStyle.strokeWidth = 1;
polygonStyle.label = "Label:${label}";
polygonStyle.labelOutlineColor = "white";
polygonStyle.labelOutlineWidth = 3;
var smap = new OpenLayers.StyleMap({"default": polygonStyle});
var veclayer = new OpenLayers.Layer.Vector("Survey Locations", {"styleMap": smap});
map.addLayer(veclayer);
var data = {"type":"Polygon","coordinates":[[
[-2.07362131225228,52.0329916851734],
[-2.07096056091493,52.0228522264397],
[-2.05061868774548,52.0156687188299],
[-2.04280809509186,52.0210036398637],
[-2.02804521667506,52.0231163039992],
[-2.01748804200037,52.0300345805213],
[-2.01645807373352,52.0464545997404],
[-2.02589944946666,52.0529998067114],
[-2.04194978821027,52.0554276235705],
[-2.06023172485491,52.0455044093648],
[-2.07362131225228,52.0329916851734]]]};
var gson = new OpenLayers.Format.GeoJSON();
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="First label";
var FEA = new OpenLayers.Feature.Vector(GEO, {"label":locname}, polygonStyle);
veclayer.addFeatures([FEA]);
map.zoomToExtent(GEO.getBounds(),false);
data= {"type":"Polygon","coordinates":[[[-2.04514962074064,52.0403793945411],
[-2.03057040393828,52.0403841112724],
[-2.03057659173109,52.0493747022699],
[-2.04515873420745,52.049369984023],
[-2.04514962074064,52.0403793945411]]]}
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="Second label";
var FEA = new OpenLayers.Feature.Vector(GEO, {"label":locname}, polygonStyle);
veclayer.addFeatures([FEA]);
</script>
</body>
</html>
The code works but the label on the polygons displays as Label:${Label} rather than interpreting the variable to read Label: First label etc.
When this is integrated into a larger application the first label is not interpreted correctly but the second is. I suspect that it may be a layer initialisation problem but have no idea how to get over this.
Any help would be appreciated!!
Have you tried to add attributes as object after declaring the feature for example:
FEA.attributes = {
label:locname
}
It worked this way see, the changes below:
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script>
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
// Default polygon style
var polygonStyle =
OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
polygonStyle.strokeColor = "#800000";
polygonStyle.fillColor = "#800080";
polygonStyle.fillOpacity = 0.2;
polygonStyle.strokeWidth = 1;
polygonStyle.label = "Label:${label}";
polygonStyle.labelOutlineColor = "white";
polygonStyle.labelOutlineWidth = 3;
var smap = new OpenLayers.StyleMap({"default": polygonStyle});
var veclayer = new OpenLayers.Layer.Vector("Survey Locations", {"styleMap": smap});
map.addLayer(veclayer);
var data = {"type":"Polygon","coordinates":[[
[-2.07362131225228,52.0329916851734],
[-2.07096056091493,52.0228522264397],
[-2.05061868774548,52.0156687188299],
[-2.04280809509186,52.0210036398637],
[-2.02804521667506,52.0231163039992],
[-2.01748804200037,52.0300345805213],
[-2.01645807373352,52.0464545997404],
[-2.02589944946666,52.0529998067114],
[-2.04194978821027,52.0554276235705],
[-2.06023172485491,52.0455044093648],
[-2.07362131225228,52.0329916851734]]]};
var gson = new OpenLayers.Format.GeoJSON();
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="First label";
var FEA = new OpenLayers.Feature.Vector(GEO);
FEA.attributes = {
label:locname
}
veclayer.addFeatures([FEA]);
map.zoomToExtent(GEO.getBounds(),false);
data= {"type":"Polygon","coordinates":[[[-2.04514962074064,52.0403793945411],
[-2.03057040393828,52.0403841112724],
[-2.03057659173109,52.0493747022699],
[-2.04515873420745,52.049369984023],
[-2.04514962074064,52.0403793945411]]]}
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="Second label";
var FEA = new OpenLayers.Feature.Vector(GEO);
FEA.attributes = {
label: locname
}
veclayer.addFeatures([FEA]);
</script>
</body>
</html>
I have added map displaying some elements with specific geo position using Google.API. In modern browsers everything works fine, but IE7/8 as always has some problems. When trying to center map using lat/long parameters of each element I'm getting error stating , that 'lat' is "empty or not an object" in line var pos_lat = parseFloat(data_map[i]['lat']);. Still marker is added in the proper place using the same data. Anyone had this kind of problem ?
<script type='text/javascript'>
var map;
var mapStart = function(){
if(GBrowserIsCompatible()){
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.961869,19.134521),6);
map.addControl(new GLargeMapControl());
var icon1 = new GIcon();
icon1.image = "/static/images/map_icon_1.png";
icon1.iconSize = new GSize(36, 30);
icon1.infoWindowAnchor = new GPoint(16,16);
icon1.iconAnchor = new GPoint(16,16);
var data_map = [{'url': '/bo/properties/property/7/', 'lat': '52.1898985', 'long': '20.8461914', 'name': 'asdfgh'},]
mapa.enableDoubleClickZoom();
mapa.enableContinuousZoom();
var bounds = new GLatLngBounds();
var maxlng =0;
var maxlat=0;
var minlng=0;
var minlat=0;
var positions=0;
var zoom = 0;
for (var i=0; i < data_map.length; i++){
var pos_lat = parseFloat(data_map[i]['lat']);
var pos_lon = parseFloat(data_map[i]['long']);
if(!isNaN(pos_lat) && !isNaN(pos_lon)){
positions = 1;
zoom++;
addMarker(pos_lat, pos_lon,{icon:icon1});
if (pos_lat < minlat || minlat==0){ minlat = pos_lat}
if (pos_lat > maxlat || maxlat==0){ maxlat = pos_lat}
if (pos_lon < minlng || minlng==0){minlng = pos_lon}
if (pos_lon > maxlng || maxlng==0){maxlng = pos_lon}
lat = minlat + (( maxlat - minlat)/2);
lng = minlng + (( maxlng - minlng)/2);
var allpoints = new GLatLng(lat,lng);
bounds.extend(allpoints);
}
}
if(positions){
if(zoom > 2){
mapa.setZoom(map.getBoundsZoomLevel(bounds)-2);
}
else{
map.setZoom(10);
}
map.setCenter(bounds.getCenter());
}
}
}
var addMarker = function(lat, lon, options){
point = new GLatLng(lat,lon);
var marker = new GMarker(point, options);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(info_box_html);
});
map.addOverlay(marker);
}
$(document).ready(function(){
mapStart();
});
window.onunload = function (){ GUnload()};
</script>
var data_map = [{'url': '/bo/properties/property/7/', 'lat': '52.1898985', 'long': '20.8461914', 'name': 'asdfgh'},]
There is an extra comma at the end of array.
Also try to use data_map[i].lat instead of data_map[i]['lat']