I am trying to figure out how H.map.Spatial.Label is used. The docs only ever reference the type on this page and it is not mentioned anywhere else.
My goal is to render a label on a H.map.Polygon object from the GeoJSON reader (without an SVG) and this seems like the closest type to use. I am able to style the polygon object with colors but I am finding it difficult to properly render a label.
You can try something like below, create a dynamic label that keeps on getting different value from geoJSON field.
var newlabel = document.createElement("Label");
newlabel.setAttribute("for",id_from_input);
newlabel.innerHTML = "Here goes the text";
var icon = new H.map.Icon(newlabel);
var marker = new H.map.Marker({lat: 52.5, lng: 13.4 }, {icon: icon});
map.addObject(marker);
Related
I have found following code:
var marker = new mapboxgl.Marker()
.setLngLat([-71.478, -53.628])
.addTo(map);
It works great. Now I want to have a special icon or an image instead of the basic mapbox icon. How do I do this?
Mapbox gives many examples about giving icons and pictures to markers BUT I only found methods with geojson features (e.g. https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ ). But I dont want to create a geojson layer just because to load an icon. I just want to use these 3 lines of code.
There's nothing in that example that requires a GeoJSON layer.
You can just copy/paste this part of the example:
const el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = `url(https://placekitten.com/g/30/30)`;
And then create the marker with that element:
const marker = new mapboxgl.Marker(el)
...
I'm Juyeong.
I want use arrows option in polyline.
I found need setting map engine p2d for use arrows option in document.
But there didn't show how setting map engine.
I try use arrows option, but failed.
var style = function(feature){
var areaLightGrade = feature.data.area_light_grade;
feature.setStyle({
strokeColor: '#ffffffff',
fillColor: chooseLightGradeColor(areaLightGrade),
lineWidth: 1
});
};
// Create reader object initializing it with a document:
var reader = new H.data.geojson.Reader('http://127.0.0.1:8887/area_20180707.geojson', {style: style, disableLegacyMode: true});
Could you please tell me how can I use arrows option?
I'll looking forward your reply.
Thanks.
I found what is wrong.
I didn't set "disableLegacyMode" option.
When set that option, multipolygon did working.
I'm changing from markers to vector layer and I can't make my site to use any sort of non-default icon, whatever I put in externalGraphic style attribute doesnt have effect on map. I just see orange circles. To be exact, no matter what I put in Openlayers.Style to style my point features, I get default look of icons.
It should be easy, but I try for days and can't make it work, so I came here for help. When warstwa_ikon was markers layer everything was fine, but I need extra functionality.
Thats my styling code:
var StylIkony = new OpenLayers.Style({
externalGraphic : '${symbol}',
graphicWidth : 15,
graphicHeight : 15,
cursor : 'pointer'
});
var StylWarstwyIkon = new OpenLayers.StyleMap ({
default: StylIkony,
delete: StylIkony,
select: StylIkony,
temporary: StylIkony
});
warstwa_ikon = new OpenLayers.Layer.Vector("Ikony Lokali",{ eventListeners: { "featureselected": WywolajRamke }});
warstwa_ikon.StyleMap = StylWarstwyIkon;
map.addLayer(warstwa_ikon);
Thats already executed code from generating Features:
WspolrzedneIkony = new OpenLayers.Geometry.Point(2279231, 7127620);
Ikona = new OpenLayers.Feature.Vector(WspolrzedneIkony,
{ "symbol": "../GRAFIKI/IkonyLokali/10.png", "idLokalu": 1 });
warstwa_ikon.addFeatures([Ikona]);
WspolrzedneIkony = new OpenLayers.Geometry.Point(2279245, 7127630);
Ikona = newOpenLayers.Feature.Vector(WspolrzedneIkony,
{ "symbol": "../GRAFIKI/IkonyLokali/6.png", "idLokalu": 2 });
warstwa_ikon.addFeatures([Ikona]);
Thats DOM of my vector layers (warstwa_ikon) StyleMap:
http://s24.postimg.org/hwfjakg0l/stylemap.png
Thats DOM of my vector layer first Feature, which should be styled:
http://s9.postimg.org/oxlocyku7/feature.png
Sorry, I can't include normal images yet. I should add that this is not a problem with accessing icon image file, I can't get layer to use any sort of images, even from internet links.
Declares StyleMap on layer creation as:
warstwa_ikon = new OpenLayers.Layer.Vector("Ikony Lokali", {
styleMap: StylWarstwyIkon,
eventListeners: ...
});
and removes:
warstwa_ikon.StyleMap = StylWarstwyIkon;
I am trying to use Jcrop with preview pane in the page of changing avatar. However, after uploading new image file, when I call setImage to set the new image(with different width/height) and also set the attr of the preview image, the preview pane show up incorrectly. I use firebug the trace, it seems the img is still using the height, width of previous image. I modify the tutorial3 in the download package, simply adding a botton to change the image to see if the preview pane is correct or not. I seem to be the same error. Here below is the code for button click function.
Any solutions?
$('#img1').click(function(e) {
$('#preview').attr('src','demo_files/img50d5753eb067c.jpg');
jcrop_api.setImage('demo_files/img50d5753eb067c.jpg');
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
boxWidth: 450
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
});
I see the same problem with yours in this topic Change an Image while using JCrop and the answer of AdmSteck in which is the best one.
Hope this help!
within the unminified version of the plugin "boundx and boundy" are declared as local variables that do not get updated outside of the setImage function. All you need to do is remove the 'var' for these two variables and make them global.
from line 328,
var boundx = $img.width(),
boundy = $img.height(),
$div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);
change to
boundx = $img.width();
boundy = $img.height();
var $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);
I show on a Google map (V3) markers. So that the icons be loaded faster, all the icons are stored in one sprite.
I notice that the icons are sometimes cropped (at the bottom or / and on the right edge is missing a 1 pixel wide border). Interestingly, you can zoom the map, and then the problem disappears. Is this a Google bug or am I doing something wrong. The problem occurs with Firefox, Chrome and IE.
Has anyone had a similar experience or a solution for the problem?
I made a reduced example of the problem. This example can also be accessed online:
http://www.gps-tracks.com/MarkerIconSpriteProblem.aspx
var markerIcon = new google.maps.MarkerImage(
"pictures/NetzCats/C03-MapSpritesS03.png",
new google.maps.Size(20, 16),
new google.maps.Point(140, 1600),
new google.maps.Point(10, 8)
//new google.maps.Size(20, 16)
);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
icon: markerIcon
});
You're using v3.10
http://jsfiddle.net/skdz6/
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"
With version 3.9 everything is OK http://jsfiddle.net/skdz6/1/
src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"
Someone who knows to get it working in v3.10?
since version 3.11 of the google maps API, the Icon object replaces MarkerImage. Icon supports the same parameters as MarkerImage.
The properties of the marker are a bit more clearly defined since version. For me this worked much better.
An example could look like this:
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
for further information check this site: https://developers.google.com/maps/documentation/javascript/markers
You are scaling your icon down to half its size, so it will inevitably lose either one border or the other, and you're exchanging Size and Point, as well as the order of the properties.
Try this instead:
var markerIcon = new google.maps.MarkerImage(
new google.maps.Point(5, 8), // anchor (POINT)
new google.maps.Point(140, 1600),//<====== origin (POINT)
new google.maps.Size(10, 8), //<======scaledSize (SIZE)
new google.maps.Size(20, 16), //<====== Size (SIZE)
"pictures/NetzCats/C03-MapSpritesS03.png" //URL
);
Documentation here.