The following code is copied from Bing Maps V8 interactive SDK. Only the zIndex is added:
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(40.750220, -99.476964),
zoom: 4
});
// weather radar tiles from Iowa Environmental Mesonet of Iowa State University
var weatherTileSource = new Microsoft.Maps.TileSource({
uriConstructor: 'http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{zoom}/{x}/{y}.png'
});
var weatherTileLayer = new Microsoft.Maps.TileLayer({
mercator: weatherTileSource,
zIndex: 10001
});
map.layers.insert(weatherTileLayer);
Is it possible to adjust the zIndex in a way that the weather tile layer lies over the layer which shows town and state names?
By default the Bing Maps uses vector labels which render above everything but pushpins. You can disable this feature and have the labels rendered in the base map tiles (below tile layers) by adding the following map option when loading: liteMode: true
You can find out more about vector labels here: https://msdn.microsoft.com/en-us/library/mt750538.aspx
Related
I have an ifc file for a 3D model, and I'm trying to make different elements of the model different colors. I'm using the IFC.js web-ifc-three IFCLoader for three.js. There are multiple examples of how to use the library but when I try to change colors for the elements based on a list of expressIDs there aren't any changes. I've tried making a subset with a specific material after the model is loaded, but that doesn't work either.
I use:
//Sets up the IFC loading
var ifcModels = [];
var ifcLoader = new IFCLoader();
ifcLoader.ifcManager.setWasmPath("./three/examples/jsm/loaders/ifc/");
ifcLoader.load("./models/rac_advanced_sample_project.ifc", (ifcModel) => {
ifcModels.push(ifcModel);
console.log(ifcModels[0]);
scene.add(ifcModel)
});
const initMaterial = new THREE.MeshLambertMaterial({
transparent: true,
opacity: 0.6,
color: 0x008000,
depthTest: false
});
console.log(ifcModels);
console.log(ifcModels[0]);
ifcLoader.ifcManager.createSubset({
modelID: ifcModels[0].modelID,
ids: [281144],
material: initMaterial,
scene: scene,
removePrevious: true
});
to try to change the color of an element where its expressID is 281144, for example.
This is the code from one of their examples that I base the rest of my code off of:
highlighting-single example
Does anyone know how to do this/has been able to do this?
I'm having an issue where my KML Layer does not appear on an embedded google map on my website.
I made a free website using google sites and uploaded my KML file to it so that I could set the url: 'https://sites.google.com/site/kmlroute/home/kml'. The google map itself shows up but the KML layer at that url does not.
My code is below. Does anyone see any syntax errors, logic errors, or anything of the sort that would be stopping my KML Layer from appear on my map???
Any comments, help, and advice is welcome and sincerely appreciated.
function initMap(lat, lng) {
var myLatLng = {lat: lat, lng: lng};
// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('bus_1_map'), {
center: myLatLng,
scrollwheel: false,
zoom: 12
});
var route = new google.maps.KmlLayer({
url: 'https://sites.google.com/site/kmlroute/home/kml',
map: map
});
You need to pass the URL of the XML file itself.
Try this:
var route = new google.maps.KmlLayer({
url: 'https://sites.google.com/site/kmlroute/home/kml/Bus%2022%20Route.kml.xml?attredirects=0&d=1',
map: map
});
How did I the url?
Go to https://sites.google.com/site/kmlroute/home/kml
Copy link address of the download arrow.
I'm new to phaser, and for the past few days I've been trying to make a really simple game, platformer-style, where the player must navigate to certain areas before being able to exit the level.
I have the basics running, but now I can't seem to figure out how to check if the player is in those areas.
The relevant part of the code so far is as follows:
var game = new Phaser.Game(800, 600, Phaser.AUTO, "mygame", {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.tilemap("questMap", "assets/quest.json", null, Phaser.Tilemap.TILED_JSON);
game.load.image("tilesheet", "assets/tilesheet.png");
game.load.image("npc", "assets/npc.png");
game.load.spritesheet("player", "assets/player.png", 64, 64);
}
var map;
var tileset;
var groundBg;
var props;
var houses;
var houseProps;
var npc;
var ground;
var areas;
var player;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = "#A8DBFF";
map = game.add.tilemap("questMap");
map.addTilesetImage("tilesheet");
map.addTilesetImage("npc");
ground = map.createLayer("ground");
groundBg = map.createLayer("groundbg");
props = map.createLayer("props");
houses = map.createLayer("houses");
houseProps = map.createLayer("houseprops");
npc = map.createLayer("npc");
map.setCollisionBetween(1, 5000);
ground.resizeWorld();
Not too pretty, I know.
I've created the map with tiled and there are a lot of small props and decorative tiles, hence the multiple "map.createLayer()" calls. The only one with collision is the ground layer.
Now, on my Tiled file, I've created an Object layer and drawn small rectangles on the areas I want to check if the player is in. I thought this was going to be an easy process but I can't seem to figure out how to load those areas into Phaser, and then check if the player is within bounds.
Googling has given me some results, but none seem to fit, as they usually cover how to add a sprite to an object, which in this case does not apply.
I simply need that small area to exist and check if the player is there. I've also given names to each of those rectangles in Tiled, via the custom properties tab.
I would try using a transparent image as the area you wish to check if your sprite is over and use
if(sprite1.overlap(transparentImage)){
//do something
}
I'm trying to implement my own shape class with ports. However I want the links that these shapes generate to be smooth. Right now, the only way i know to make smooth links is
link.set('smooth', true).
But how do i do that not through code? How do i get smooth links by just dragging?
I extended Link class (MyLink) but how do i tell JointJS which Link class to use when i drag on the port?
joint.shapes.myclass.Link = joint.dia.Link.extend({
defaults: {
type: 'myclass.Link',
attrs: { '.connection' : { 'stroke-width' : 5 }},
smooth:true
}
});
Links created via the UI by dragging ports are defined in the defaultLink property of the paper. It can either be an object in which case it is a link model or a function that returns a link model:
var paper = new joint.dia.Paper({
defaultLink: new joint.shapes.myclass.Link,
...
})
or:
var paper = new joint.dia.Paper({
defaultLink: function(elementView, magnet) {
if (aCondition) return new joint.dia.Link;
else return joint.shapes.myclass.Link;
}
})
The function gives you flexibility in creating different links on the fly depending on what element is underneath or what magnet (SVG element for port) is being dragged.
I'm using the plugin Leaflet.Control.Search to search markers in a layer group, which works fine. Once the marker has been found, the map already automatically pans to the center of the respective location, and the marker popup is being opened.
Now, on search, I would like to set the map's zoom level to a fixed value.
My map's initial zoom level is 12 – but once someone uses the search i'd like to set it to 16. How could this be achieved? I tried to implement setZoom, but I'm not sure how the correct syntax should be..
The code looks like this at the moment:
var searchControl = new L.Control.Search({layer: markers2, propertyName: 'Name', circleLocation:true});
searchControl.on('search_locationfound', function(e) {
e.layer.openPopup().openOn(map);
map.setZoom(16);
});
map.addControl( searchControl );
Thanks a lot for any hints!
ps: when i put map.setZoom(16); BEFORE e.layer.openPopup().openOn(map); then the zoom works fine, but the popup doesn't open like it should – it only opens when I hit search again…
Have you tried map.setZoom(16);instead of this in your "on location found" listener?
Alternatively, you might want to try the map.setView(). It takes a lat/lng and zoom level. You can either take in the marker's lat/lng or the popup's lat/lng
Try editing the plugin, commenting the zoom option (line 26)
_config: {
country: '',
searchLabel: 'buscar en el mapa...',
notFoundMessage: 'destino no hallado',
messageHideDelay: 3000,
/*zoomLevel: 18*/
},
I did it another way.
After the
propertyName
I put
zoom: 16
The code looks like this:
var searchControl = new L.Control.Search({
layer: allLayers,
propertyName: 'myKey',
zoom: 16
}).addTo(map);