Would you please advice where I could find explanation about Group({insert:true}) option as I could not find it in reference? How does this option work and if someone had made that example he should be able to read about it somewhere. Thanks.
This item constructor option is an internal API that doesn't really have a public use case, this is why you didn't find it in the documentation.
It is mainly used for internal operations and testing purpose.
It is true by default and if you set it to false, the consequence is that the created item will not be inserted into the scene graph, meaning you won't see it on the screen.
Look at this sketch for a demonstration.
// This item will be inserted as a child of the active layer.
const itemInserted = new Path.Circle({
center: view.center - 50,
radius: 50,
fillColor: 'orange'
});
// This item will not be inserted in the scene graph.
const itemNotInserted = new Path.Circle({
center: view.center + 50,
radius: 50,
fillColor: 'blue',
insert: false
});
Related
wondering what the best way of creating responsive canvas sizes. At the moment I have to double up all my code using the following pattern
var cicrle = new Path.Circle({ radius: 40, fillColor: 'red' })
circle.position = view.center
view.onResise = function(event){
circle.position = view.center
}
This is ok for one item, but once the items start adding up it a lot of doubling up of code.
Is there a better way of doing things?
Thanks in advance
Paper.js has 2 kinds of grouping classes: Group and Layer; if you update one of those's position, you'll update all its descendants positions at once.
By default, the created items are implicitely added to the active layer (project.activeLayer) so for a simple scene:
project.activeLayer.position = view.center;
should do the trick.
See this sketch for a demonstration.
new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
});
new Path.Circle({
center: view.center + 50,
radius: 50,
fillColor: 'orange'
});
function onResize() {
project.activeLayer.position = view.center;
}
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 am using mapbox-gl v 1.8.0. I am trying to load ESRI Vector Tiles using the ArcGIS Online service. Here is my code snippet
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'https://basemaps.arcgis.com/arcgis/rest/services/OpenStreetMap_GCS_v2/VectorTileServer/resources/styles/root.json', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
Do I need to create an access token to access that style in ArcGIS Online?
Any help is greatly appreciated!
This is a very late replay, but yes, you can load Esri Vector tile basemap layers and other layers with MapBox. And yes, you need to sign up for a free account to get an access token.
const apiKey = "YOUR_API_KEY";
const basemapEnum = "ArcGIS:Streets";
const map = new mapboxgl.Map({
container: "map", // the id of the div element
style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
zoom: 12, // starting zoom
center: [-118.805, 34.027] // starting location [longitude, latitude]
});
Go here for the full code
I have two kinds of geolocation informations: one is the exact location, the other is an aproximated, region level geolocation. As I show these informations on a map, I would like to be able to use a different marker type for each kind of location, the exact location would be green and the approximated location would be blue.
I'm using the MarkerClusterer to group Markers into one bubble, but, I need two MarkerClusterers, one for approximated locations, another for exact locations. Doing so, my MarkerCluster is one for each kind of geolocation.
My problem is: sometimes, the two Clusters overlaps, wich may lead into confusion:
As you can see, it shows that I have 7 markers there (here's it blue, but it's really a green Marker, as these geolocations are the exact kind).
But, zooming in, I have 9, because the second Cluster was underneath the first one (note that for now booth Clusters has the same color, it was supposed to be green (7) and blue (2) - so the user can be sure that the (2) locations are approximated)
Any ideas on how can I make a Cluster of Clusters? Or another approach to let the user know that there are two kinds of information?
If you have only two (or a few) classes of marker, then one approach is to create a second MarkerClusterer instance. So lets have two sets of options where the styles (not shown) are different:
var mcOptions1 = {gridSize: 40, styles: clusterStyles1, maxZoom: 19};
var mcOptions2 = {gridSize: 40, styles: clusterStyles2, maxZoom: 19 };
Then you can build two separate arrays of markers, say markers1 and markers2, which in my case depend on a status attribute of the marker:
(note that every marker is added to the map also as normal, not shown)
// push to the array, markers[]
switch(status)
{
case 'Include':
markers1.push(marker);
break;
case 'Exclude':
markers2.push(marker);
break;
default:
markers1.push(marker);
};
Finally, then create the two MarkerClusterer instances each with separate arrays and options
var markerClust1 = new MarkerClusterer(map, markers1, mcOptions1);
var markerClust2 = new MarkerClusterer(map, markers2, mcOptions2);
The result on the map shows two styles of marker icons and two styles of Clusters. As you zoom out the two separate markers never get clustered together - I think this is just what you need, and it looks good on the map!
(I'd like to post some map pics, but cannot post images until my reputation increases!!)
I did use the later MasterClusterPlus rather than the earlierr MasterClusterer, but I cannot see any reason that the approach will not work with the earlier version.
I am dealing with this problem right now.
You can use what qurn said, and change clustermarker style, so the icons won't overlap.
var clusterStyles = [
{
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#11ffbb',
textSize: 10,
offsetX: 20,
offsetY: 20
}, {
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11,
offsetX: 20,
offsetY: 20
}, {
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12,
offsetX: 20,
offsetY: 20
}
];
var mcOptions = {
styles: clusterStyles
};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
Then set "offsetX" and "offsetY" properties.
Ex: If you have 4 categories / groups you can use offset: -20,-20 | -20,20 | 20, -20 | 20,20
The goal is to get the icons around your point.
In case this won't help you, take a look at Google Maps Spiderfier.
Hope it helped.
I'm trying to let OpenLayers display a KML file that was retrieved from a server.
For some reason this does not work.
Similar questions have been asked, but I could not find a working example.
What I did was improve one of the examples in the OpenLayers distribution: kml-track.js
I improved it with what I found. This is what it looks like. I feel like I'm missing something obvious.
Any pointers are welcome
var map ;
function init() {
var mercator = new OpenLayers.Projection("EPSG:900913");
var geographic = new OpenLayers.Projection("EPSG:4326");
//note that I have host equal to location// //Math.Random will stop caching//
var mykmlurl = 'http://myserver/kml-track.kml';
map = new OpenLayers.Map({
div: "map",
projection: mercator,
layers: [
new OpenLayers.Layer.OSM(),
//Defiine your KML layer//
new OpenLayers.Layer.Vector("This Is My KML Layer", {
//Set your projection and strategies//
projection: geographic,
strategies: [new OpenLayers.Strategy.Fixed()],
//set the protocol with a url//
protocol: new OpenLayers.Protocol.HTTP({
//set the url to your variable//
url: mykmlurl,
//format this layer as KML//
format: new OpenLayers.Format.KML({
//maxDepth is how deep it will follow network links//
maxDepth: 1,
//extract styles from the KML Layer//
extractStyles: true,
//extract attributes from the KML Layer//
extractAttributes: true
})
}),
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
graphicName: "circle",
pointRadius: 2,
fillOpacity: 0.5,
fillColor: "#ffcc66",
strokeColor: "#666633",
strokeWidth: 1
})
})
})
],
center: new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator),
zoom: 8
});
//function called// //timer// //layer to refresh//
window.setInterval(UpdateKmlLayer, 5000, MyKmlLayer);
}
function UpdateKmlLayer(layer) {
//setting loaded to false unloads the layer//
layer.loaded = false;
//setting visibility to true forces a reload of the layer//
layer.setVisibility(true);
//the refresh will force it to get the new KML data//
layer.refresh({ force: true, params: { 'key': Math.random()} });
}
This is an example of how to display a KML layer in OpenLayers which might help you:
http://openlayers.org/dev/examples/kml-layer.html
Are you getting any errors when opening your page - or does it run ok but nothing appear? If you're not getting any errors then it might indicate an issue with how your projections are set up (i.e. your features might not appear where you expect them to)