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)
...
Related
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);
I want to show an image with a frame. Using <a-image> gives me a plane with the image.
<a-box src="path/to/img.jpg> however gives me the image but it's giving me the image 6 times. Is it possible to get the box with am image at the front and any color at all other sides?
I don't know if you can do this with Aframe (I don't think so), but you can do it with Threejs, by making an array of materials that contain a material for each box face, and applying that to the box mesh.
const loadManager = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(loadManager);
const materials = [
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
];
loadManager.onLoad = () => {
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
cubes.push(cube); // add to our list of cubes to rotate
};
you can place this code inside of a custom component that is attached the cube geometry.
Here is the tutorial that the above code was taken from, on threejsfundamentals.
Say, a shape of a human outline.
Ideally it could be converted to 3d by extruding, but even if it has no depth, that's fine for my use case.
I think the easiest way would be taking a transparent png image (the human outline), and use it as a source for an a-plane
<a-plane material="src: img.png; transparent: true"></a-plane>
Glitch here.
....but if you want to create a geometry with a custom shape, which will be helpful for extrusion, then check this out:
Creating a simple shape with the underlying THREE.js
First you need an array of 2D points:
let points = [];
points.push(new THREE.Vector2(0, 0));
// and so on for as many as you want
Create a THREE.Shape object which vertices will be created from the array
var shape = new THREE.Shape(points);
Create a mesh with the shape geometry, and any material, and add it to the scene, or entity
var geometry = new THREE.ShapeGeometry(shape);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var mesh = new THREE.Mesh(geometry, material);
entity.object3D.add(mesh);
More on:
1) THREE.Shape
2) THREE.ShapeGeometry
3) THREE.Mesh
Extrusion
Instead of the ShapeGeometry you can use the ExtrudeGeometry object:
var extrudedGeometry = new THREE.ExtrudeGeometry(shape, {amount: 5, bevelEnabled: false});
Where the amount is basically the "thickness". More on Three.ExtrudeGeometry here.
Usage with AFRAME
I'd recommend creating an AFRAME custom component:
js
AFRAME.registerComponent('foo', {
init: function() {
// mesh creation
this.el.object3D.add(mesh);
}
})
HTML
<a-entity foo></a-entity>
2D shape here.
Extruded 2D shape here.
Three.js examples here. They are quite more complicated than my polygons :)
There are also a couple of pre-built A-Frame components you could use to help with extrusion.
https://github.com/JosePedroDias/aframe-extrude-and-lathe
https://github.com/luiguild/aframe-svg-extruder
You can find examples of usage in each of those repos.
Is it possible change the style of a external wms layer??
im trying to use this layer:
https://firms.modaps.eosdis.nasa.gov/wms/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&LAYERS=fires24&width=400&height=250&BBOX=-26,34,35,82
with this code on openlayers3
var fill = new ol.style.Fill({color: 'GREEN'});
var stroke = new ol.style.Stroke({color: 'GREEN'});
var styles = [new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
stroke: stroke,
radius: 5
})
})];
var fires = new ol.layer.Image({
name: 'fires',
source: new ol.source.ImageWMS({
url: 'https://firms.modaps.eosdis.nasa.gov/wms/',
params: {
'LAYERS': 'fires24',
'VERSION': '1.1.1'
}
}),
style: styles
});
the layer is displayed correctly but without my own styles.
Is it possible to do that or replace with a custom icon?
The WMS link you use is returning a PNG file, which I believe OpenLayers cannot style 'after the fact'. Once you've got it it's immutable - it's not 'data' but an image with transparency that is overlaid on top of your underlying map source.
There are some params you can pass into a wms call (as you've done) and the standard looks like it can support you passing styles into the call to the WMS server to get it to use those when rendering the image.
I've got a list of possible parameters from the geoserver website (a GIS server) - http://docs.geoserver.org/stable/en/user/services/wms/reference.html
Looking at that link it looks like sld or sld_body parameters may work. SLD is like OL styles but in XML. Details of these stylesheets are here - http://docs.geoserver.org/stable/en/user/styling/index.html#styling
I've had a go at this jsfiddle : https://jsfiddle.net/y7fj57dj/ but it's not working as such - it could either be my SLD (I'm not up to speed with it) or the NASA server doesn't know what to do with it/is ignoring it.
You may need to contact NASA server admins to confirm if you can style the WMS calls (support#earthdata.nasa.gov, retrieved by going to https://firms.modaps.eosdis.nasa.gov/wms/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities).
Look at this code: a is an object we save a circle overlay inside. In Google maps we can get type{polygon, circle, rectangle, marker, polyline} or center{circle}, etc. Imagine you create a circle on the map. How can you get something like this:
a.fillColor = circle.fillColor;
<script>
function getProprties()
{
var a = {};
a.type = circle.type;
a.center = circle.center;
a.redius = circle.radius;
}
</script>
You should be able to use this, using the get function available on all MVCObjects
a.fillColor = circle.get('fillColor');