How do I change the colours of the Icons easily? I just want to be able to change it to a different colour using googles standard markers? Is there a way where I can just declare the color where I create the marker with var = marker..... ?
<script type="text/javascript">
var map = null;
function initialize() {
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(54.2361100,-4.5480600),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var point = new google.maps.LatLng(50.7184100,-3.5339000);
var marker = createMarker(point,'<div style="width:200px"><h2>text</h2><\/div>')
var point = new google.maps.LatLng(50.9097000,-1.4043500);
var marker = createMarker(point,'<div style="width:200px"><h2>text</h2><\/div>')
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 535px; height: 500px"></div>
Adjusting Sean's answer from here How can I change the color of a Google Maps marker?.
Try changing your create marker function to
function createMarker(latlng, html, iconName) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: iconName,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
And then call it with
var marker = createMarker(point,'<div style="width:200px"><h2>text</h2><\/div>', 'brown_markerA.png')
Making sure you place all the icons in the same place as your map page.
You can then adjust how you build up the string for different colors or letters.
Related
When I'm trying to change image src in FabricJS works fine but after add filter (blend image) to that image change src not working :
Change image src code :
function replaceImage(imgLink) {
fabric.Image.fromURL(imgLink, function(img) {
var object = canvas.getActiveObject();
object._element.src = imgLink;
canvas.renderAll();
});
}
add filter code :
filter2 = new fabric.Image.filters.BlendImage({
image: mainObject,
mode: 'mask',
alpha: 0.5
});
let object = canvas.getActiveObject();
object.filters.push(filter2);
object.applyFilters();
canvas.renderAll();
Use imageObj#setSrc to change the source of image object. and options available for BlendImage modes are multiply, add, diff, screen, subtract, darken, lighten, overlay, exclusion, tint one of them.
DEMO
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
width: 300,
height: 300
});
var imageObject;
fabric.Image.fromURL('https://picsum.photos/200/200', function(img) {
img.set({width:200,height:200,scaleX:1,scaleY:1})
imageObject = img;
canvas.add(img);
},{crossOrigin:'annonymous'});
var i=0;
function addFilter(){
filter2 = new fabric.Image.filters.BlendImage({
image: imageObject,
mode: 'multiply',
alpha: 0.5
});
imageObject.filters.push(filter2);
imageObject.applyFilters();
canvas.requestRenderAll();
}
function changeSrc(){
var url = 'https://picsum.photos/200/200?random='+ ++i;
imageObject.setSrc(url,function(){
canvas.requestRenderAll();
},{crossOrigin:'annonymous'})
}
canvas{
border:1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<button onclick='changeSrc()'>changeSrc</button>
<button onclick='addFilter()'>addFilter</button><br>
<canvas id="editorCanvas"></canvas>
Each trk in my gpx file contains
<extensions
<gpxx:TrackExtension>
<gpxx:DisplayColor>Red</gpxx:DisplayColor>
</gpxx:TrackExtension>
</extensions>
with different values for gpxx:DisplayColor. I want to show each track in the color specified in the gpx file. Hence I need to get the color out of the (xml in) the gpx file and into the track style.
I tried
var trackColor = "black";
var gpx = new ol.source.Vector({
format: new ol.format.GPX({
readExtensions:
function(feat, node)
{
var i, y;
y = node.childNodes;
for (i=0; i < y.length; i++)
{
if (y[i].nodeName == "gpxx:TrackExtension")
{
trackColor = y[i].textContent;
}
}
}
})
});
This seems to be a kludge as it uses a loop and does not reference DisplayColor.
var track = new ol.layer.Vector({
source: gpx,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: trackColor,
width: 3
})
})
});
The three trk elements have DisplayColors Red, DarkMagenta and Green, but all are shown in black.
You have to store the color into the feature on read to access it in a style function.
Something like this:
var gpx = new ol.source.Vector({
format: new ol.format.GPX({
readExtensions: function(feat, node) {
var i, y;
y = node.childNodes;
for (i=0; i < y.length; i++){
if (y[i].nodeName == "gpxx:TrackExtension") {
// save feature color
feat.set('color', y[i].textContent);
} else {
feat.set('color', '#000');
}
}
}
})
});
then:
var track = new ol.layer.Vector({
source: gpx,
style: function (f, res) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
// get current feature color
color: f.get('color'),
width: 3
})
}
})
});
I'm trying to load a .svg asset into my three.js scene, as a flat vector layer; I found this example with SVGLoader and SVGRenderer from another post, but I can't make it work.
The svg loaded is stuck in 2d space and not responding to camera movement, I can't access its position.
I tried to switch to WebGLRenderer, but the svg doesn’t get loaded.
The option of loading it as sprite would be good, but I would want the sprite to not face the camera and stay still in 3d space.
var svgManager = new THREE.SVGLoader();
var url = 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Europe_laea_location_map.svg';
function svg_loading_done_callback(doc) {
init();
svg(new THREE.SVGObject(doc));
ico();
animate();
};
svgManager.load(url,
svg_loading_done_callback,
function() {
console.log("Loading SVG...");
},
function() {
console.log("Error loading SVG!");
});
var AMOUNT = 100;
var container, camera, scene, renderer;
function init() {
scene = new THREE.Scene();
renderer = new THREE.SVGRenderer();
renderer.setClearColor(0x00ff00);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
var container = document.getElementById('container');
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1100;
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
window.addEventListener('resize', onWindowResize, false);
}
function svg(svgObject) {
svgObject.position.x = 510;
svgObject.position.y = -110;
svgObject.position.z = 0;
scene.add(svgObject);
}
function ico() {
geometry = new THREE.IcosahedronGeometry(100, 1)
material = new THREE.MeshNormalMaterial({});
ico = new THREE.Mesh(geometry, material);
ico.position.y = -300;
scene.add(ico);
ico2 = new THREE.Mesh(geometry, material);
ico2.position.y = 500;
ico2.position.x = -500;
ico2.position.z = -50;
scene.add(ico2);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update;
render();
}
function render() {
renderer.render(scene, camera);
}
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<div id="container"></div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/renderers/SVGRenderer.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/loaders/SVGLoader.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
The SVGLoader and SVGRenderer are two different things. The first loads an SVG file and converts it to three.js shapes (albeit with some limitations, i.e. can read very simple SVGs, does not render strokes but only filled objects, etc), while the latter renders three.js primitives using SVG elements instead of WebGL. In a sense, they are opposites of each other.
So, first of all, you'd need to use the WebGLRenderer for your case.
Then, you need to change the SVG loading callback. It receives an array of paths with which you can render the SVG.
See the changes in functions svg_loading_done_callback, init and svg, and run it in JSFiddle:
var svgManager = new THREE.SVGLoader();
var url = 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Europe_laea_location_map.svg';
function svg_loading_done_callback(paths) {
init();
svg(paths);
ico();
animate();
};
svgManager.load(url,
svg_loading_done_callback,
function() {
console.log("Loading SVG...");
},
function() {
console.log("Error loading SVG!");
});
var AMOUNT = 100;
var container, camera, scene, renderer;
function init() {
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x00ff00);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
var container = document.getElementById('container');
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1100;
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
window.addEventListener('resize', onWindowResize, false);
}
function svg(paths) {
var group = new THREE.Group();
group.position.x = 510;
group.position.y = -110;
group.position.z = 0;
for ( var i = 0; i < paths.length; i ++ ) {
var path = paths[ i ];
var material = new THREE.MeshBasicMaterial( {
color: path.color,
side: THREE.DoubleSide,
depthWrite: false
} );
var shapes = path.toShapes( true );
for ( var j = 0; j < shapes.length; j ++ ) {
var shape = shapes[ j ];
var geometry = new THREE.ShapeBufferGeometry( shape );
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
}
}
scene.add( group );
}
function ico() {
geometry = new THREE.IcosahedronGeometry(100, 1)
material = new THREE.MeshNormalMaterial({});
ico = new THREE.Mesh(geometry, material);
ico.position.y = -300;
scene.add(ico);
ico2 = new THREE.Mesh(geometry, material);
ico2.position.y = 500;
ico2.position.x = -500;
ico2.position.z = -50;
scene.add(ico2);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update;
render();
}
function render() {
renderer.render(scene, camera);
}
PS: Check the SVG Loader to see what it's able to parse
i am working for a face detection mechanism in winJs starting from the basic. What is the mechanism to open a Camera in winJs and in which tag to show the video.
This is the code i know till now
var Capture = Windows.Media.Capture;
var mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync();
How to show in a Div the same.
here's the html for the same.
function init() {
livePreview = document.getElementById("live-preview");
startCamera();
}
function startCamera() {
try {
mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync().then(function () {
livePreview.src = URL.createObjectURL(mediaCapture);
livePreview.play();
});
} catch(exception) {
Windows.UI.Popups.MessageDialog(exception.message, "Error").showAsync();
}
}
HTML
<div id="application" style="width:100%; height: 180px; overflow: hidden; background: #222;">
<video id="live-preview" style="display : none; width:100%; height: 180px; overflow: hidden;"></video>
</div>
these were some of the variables Select appropriate ones
var Capture = Windows.Media.Capture;
// Globals
var mediaCapture;
var recording = false;
var livePreview;
var activation = Windows.ApplicationModel.Activation;
<!doctype html>
<html>
<head>
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
var name='';
var socket = io.connect('http://localhost:8000');
$(document).ready(function() {
//var app = require('http').createServer(handler),
//io = require('socket.io').listen(app);
//app.listen(8000);
//var url = 'http://localhost:8000';
//var socket = io.connect(url);
//socket.connect();
//socket.on('movement', function() {socket.send();
//console.log('Connected!');});
while (name == '') { name = prompt("What's your name?",""); }
var left =5;
var top = 5;
var width =20;
var height =20;
var rcolor= get_random_color();
var ctx = $('#cgame')[0].getContext("2d");
ctx.fillStyle = rcolor;
ctx.fillRect(left, top, width, height);
ctx.lineWidth = 10;
$(document).keydown(onkeydown);
socket.emit('movement', function onkeydown(left,top, width, height)
{
var kycode;
if (evt!= null)
{
kycode = evt.keyCode;
ctx = $('#cgame')[0].getContext("2d");
switch(kycode)
{
case 37: //left
if(left >> ctx.left){
call: clear();
left--;
call:draw();
//alert("Hi left");
break;
}
case 38: //up
if(top >> ctx.top)
{
call: clear();
top--;
call:draw();
//alert("Hi Up");
break;
}
case 39://right
if((left+width) << (ctx.width+ctx.left) )
{
call: clear();
left++;
call:draw();
//alert("Hi right");
break;
}
case 40:
{
call: clear();
top++;
call:draw();
//alert("Hi down");
break;
}
Default:
{
alert("Hi");
break;
}
}
}
}
);
function get_random_color()
{
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ )
{
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
function clear()
{
ctx.width = ctx.width;
ctx.height = ctx.height;
ctx = $('#cgame')[0].getContext("2d");
ctx.clearRect(0,0,cgame.width,cgame.height);
}
function draw()
{
ctx.width = ctx.width;
ctx.height = ctx.height;
ctx = $('#cgame')[0].getContext("2d");
ctx.fillRect(left, top, width, height);
}
socket.emit('register', name );
$('#Name').hide();
$('#Game').hide();
$('#start').hide();
});
</script>
</head>
<body>
<label id="Game">Welcome to Node JS Gaming</label>
<input type='text' id ='Name'>
<input type='button' id="start" value= 'login' Onclick="welcome()" >
<div>
<canvas id= "cgame" style="border:1px solid #000000; width: 100%; height: 100%;"; onkeydown ="onkeydown"></canvas>
</div>
</body>
</html>
Attempted socket code:
var io = require('socket.io').listen(8000);
io.sockets.on('connection', function (socket)
{
socket.on('movement',function(left,top, width, height){});
socket.broadcast.emit('movement', {
});
});
}
);
//io.sockets.emit();
I have to pass the left top width and height values to the server so that the value is reflected on another client. Say for example, two clients are Chrome and Mozilla, whenever a user presses up, down, left or right the corresponding rectangle has to be moved. Similarly it should happen for other users as well.
I don't know how to pass the values. Sorry for being so naive; I am a beginner in node.js.
Please let me know what the appropriate code is for the server side.
Please see this question regarding a game that is very similar to what you are trying to achieve
EDIT: Just realised that that question omits the actual multiplayer section. My implementation of that code was as follows (not full code, only the important bits)
Client Side:
socket.on('message', function(msg) {
msg = JSON.parse(msg);
players[msg.player] = new Player(msg.name, msg.x, msg.y, msg.width, msg.height, msg.color);
});
In the Player class:
draw : function(){
context.fillStyle = this.color; // context is canvas.getContext('2d');
context.fillRect(this.x, this.y, this.width, this.height);
}
Now also on the client side you can have:
function update() {
context.clearRect(0, 0, 700, 300); // clearing the canvas (width = 700, height = 300)
for( var player in players ) {
players[player].draw();
}
}
var FPS = 60;
setInterval(update, 1000/FPS);
In my experience you'd be better off doing the actual moving of the players coordinates on the server side. So client presses Left -> sent via socket -> server adjusts players x to x-=1 and sends it back where it's then drawn.
Note that this is a crude version of the code required