We Keep Coding

Drawing a circle around a point in vue2-google-maps

I am using Vue to build a site that takes in some data and displays a google map with markers and circles around the points with the markers.
So far I can create the map with markers perfectly fine, however I have no idea what the proper way to create a circle is with the Vue2-google-maps package, despite having combed through the Documentation for a long time.
Here is the code so far
<GmapMap
:center="center"
:zoom="10"
class="google-map">
<GmapMarker
:key="index"
v-for="(pin, index) in markers"
:position="pin.position"
:icon="pin.icon"
:clickable="true"
:draggable="true"
#click="center=pin.position">
</GmapMarker>
<GmapCircle
:key="index"
v-for="(pin, index) in markers"
:center="pin.position"
:radius="1000"
:visible="true"
:fillColor="red"
:fillOpacity:="1.0">
</GmapCircle>
</GmapMap>
Note that markers is a list of markers that is created somewhere else in the code.
If you take out the tags, the code works perfectly fine placing all the markers. I just need to know what the proper tag/object set is for creating a circle.

You are on the right track, GmapCircle component in vue2-google-maps library is intended for creating circles on the map. There are might be several reasons why circles are not getting displayed:
center property value is invalid, the supported format is {lat: <lat>, lng: <lng>} or google.maps.LatLng value
maybe you could not spot them due to relatively small size (given the provided 2 kilometer diameter, they could be easily missed)?
Regarding fillColor and fillOpacity properties, they need to be passed via options property, e.g. :options="{fillColor:'red',fillOpacity:1.0}"
Anyway the following example demonstrates how to create circles on map via vue2-google-maps
<GmapMap :center="center" :zoom="zoom" ref="map">
<GmapCircle
v-for="(pin, index) in markers"
:key="index"
:center="pin.position"
:radius="100000"
:visible="true"
:options="{fillColor:'red',fillOpacity:1.0}"
></GmapCircle>
</GmapMap>
export default {
data() {
return {
zoom: 5,
center: { lat: 59.339025, lng: 18.065818 },
markers: [
{ Id: 1, name: "Oslo", position: { lat: 59.923043, lng: 10.752839 } },
{ Id: 2, name: "Stockholm", position: { lat: 59.339025, lng: 18.065818 } },
{ Id: 3, name: "Copenhagen", position: { lat: 55.675507, lng: 12.574227 }},
{ Id: 4, name: "Berlin", position: { lat: 52.521248, lng: 13.399038 } },
{ Id: 5, name: "Paris", position: { lat: 48.856127, lng: 2.346525 } }
]
};
},
methods: {}
};

in my case, i had error that saw:" GmapCircle not define component", so i have used this code:
<gmap-circle
v-for="(infoWindow, index) in arrayMarkers"
:key="'circle_'+index"
radius="100"
:center="infoWindow.position"
/>

Amcharts - Maps: bad coordinates (lat/long) on a custom map (county level Romania)

I'm trying to add cities on a county map. The lat and long are drawn corectcly on the full size map(Romania level) but on the county map these are drawn wrong. I think I should rescale the map or lat/long of the city, I don't know...
How should I generate the county map in accordance with cities lat/long?
The code is listed below:
http://jsfiddle.net/xzAx7/33/
var map;
AmCharts.ready(function() {
map = new AmCharts.AmMap();
map.pathToImages = "http://www.ammap.com/lib/images/";
//map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
map.balloon.color = "#000000";
var wordlDataProvider = {
mapVar: AmCharts.maps.Cluj,
getAreasFromMap: true,
areas: [
{ id: "FR", color: "#4444ff" },
{ id: "RU", color: "#4444ff" },
{ id: "US", color: "#4444ff" }
],
images: [{
title: "ClujNapoca",
latitude: 46.85307355,
longitude: 23.63327696,
type: "circle",
color: "red",
scale: 0.5
}, {
title: "Turda",
latitude: 46.5745618,
longitude: 23.78573862,
type: "circle",
color: "red",
scale: 0.5
}]
};
map.dataProvider = wordlDataProvider;
map.areasSettings = {
autoZoom: true,
selectedColor: "#CC0000"
};
map.write("mapdiv");
});

I've found the solution. You need to define "defs" properties (leftLongiitude, ...) when you create a custom map. This is specified in this article - https://www.amcharts.com/tutorials/creating-custom-maps-for-javascript-ammap/
In the amCharts article is explained how you can get these "defs" properties.
I've changes the code below to understand how it works
"defs": {
"amcharts:ammap": {
"projection":"mercator",
"leftLongitude":"22.607117",
"topLatitude":"47.363798",
"rightLongitude":"24.261932",
"bottomLatitude":"46.384241"
}
}
demo: http://jsfiddle.net/xzAx7/35/

Use JavaScript to feed data into DOM?

In openstreetmap I'm using openlayer3 to display some data information about random building. It's a simple interaction, when you click on marker data will be presented.
I'm not good in JavaScript so I had some help, and after a while a set up everything like this, you can check it in this JSFIDDLE example.
So, I'm using ol.Feature.html#on to bind event to markers, and I'm loading data with info.innerHTML = "<h1>"+data.name+"</h1>", and everything is looking like this:
/* Create the map */
// setting up coordinates for map to display
var infobox = document.getElementById("info");
var city = ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857');
// setting up openlayer3 view
var view = new ol.View({
center: city,
zoom: 13
});
// Create the map
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: view
});
var Data =
[ { name: "foo",
address: "Some Random Address 1"
, longlat: [-73.927870, 40.763633]
}
, { name: "foo2",
address: "Some Random Address 2"
, longlat: [-73.917356, 40.763958]
}
, { name: "foo3",
address: "Some Random Address 3"
, longlat: [-73.915530, 40.779665]
}
, { name: "foo4",
address: "Some Random Address 4"
, longlat: [-73.916045, 40.779372]
}
, { name: "foo5",
address: "Some Random Address 5"
, longlat: [-73.919682, 40.777365]
}
, { name: "foo6",
address: "Some Random Address 6"
, longlat: [-73.908980, 40.776013]
}
];
function buildFeature(data) {
return new ol.Feature(
{ geometry: new ol.geom.Point(ol.proj.fromLonLat(data.longlat))
, data: data
}
);
}
function curryclickonmarker(element) {
return function (event) {
return clickOnMarker(element, event);
}
}
function clickOnMarker(info, event) {
// This is ugly!
var marker = event.selected[0];
var data = marker.G.data;
// Feed data into DOM
info.innerHTML = "<h1>"+data.name+"</h1>";
}
var selectClick = new ol.interaction.Select();
selectClick.on("select", curryclickonmarker(infobox));
// Setup markers
var features = Data.map(buildFeature);
var markers = new ol.layer.Vector({
tittle: 'City Apratments',
source: new ol.source.Vector({
features: features
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixel',
opacity: 0.75,
src: 'http://openlayers.org/en/v3.12.1/examples/data/icon.png',
})
})
});
map.addLayer(markers);
map.addInteraction(selectClick);
I would like to make this look better, it's looking very ugly, so I need someone to explain to me how can I pass multiple data for the marker, because currently I can only see foo, foo1, foo2, foo3, etc, I'm using openlayers3 API for event's, but can I use pure javascript for this so I can pass addres, pictures, description for the specific marked building, because I need to display a loot, I'm just having hard time understanding how to use javascript to pass more data?

different markers groups in leaftlet

I am using Angular and leaflet and want to build a map with different markers, eg.: ships and bridges. I want to update them individually without removing and setting all markers again. So when I have new ships, I just want to call the ship markers, update them and the bridge markers stay the same.
Right now, I tried something like this:
angular.module('angularMapApp')
.controller('MainCtrl', ['$scope', 'RequestService', 'setShipMarkers', '$q', function($scope, RequestService, setShipMarkers, $q) {
angular.extend($scope, {
hamburg: {
lat: 53.551086,
lng: 9.993682,
zoom: 13
},
markers: {
ships: {
m1: {
lat: 42.20133,
lng: 2.19110
},
m2: {
lat: 42.21133,
lng: 2.18110
}
},
bridges: {
m3: {
lat: 42.19133,
lng: 2.18110
},
m4: {
lat: 42.3,
lng: 2.16110
}
}
},
defaults: {
tileLayer: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
zoomControlPosition: 'topright',
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true,
},
scrollWheelZoom: false
}
});
But this does not works, as I get the following error (after setting markers-nested: true in my view):
You must add layers to the directive if the markers are going to use
this functionality.
However why do I need layers, if I just want to call different markers group on the same layer. I just do not want to update all of them at once.
So maybe someone can tell me, how to get separate marker groups and how to call them to update them.

For each kind of nested marker you have to create its own group layer like this, they can be empty:
layers: {
overlays: {
ships: { // use the same name as in the marker object
name: "Ships",
type: "group",
visible: true
},
bridges: { // use the same name as in the marker object
name: "bridges",
type: "group",
visible: true
}
}
}
By doing that you will also have to move the OSM base layer into the layers.baselayers object, but markers-nested="true" works this way.
Demo: http://plnkr.co/edit/HQx8bQmmsFUGcLxYt95N?p=preview

JavaScript - leaflet, adding a bunch of markers

Let's say I have a bunch of markers (over 100) I want to add from this:
module.exports = [
{ value: 'Varrock', lng: 22.5, lat: -15.52249812756166, popular: 1 },
{ value: 'Lumbridge', lng: 25.9661865234375, lat: -43.644025847699496, popular: 1 },
{ value: 'Monastery', lng: -4.0924072265625, lat: -5.714379819235291 },
{ value: 'Edgeville', lng: 2.4884033203125, lat: -6.0094592380595495, popular: 1 },
{ value: 'Varrock Palace', lng: 22.412109375, lat: -6.882800241767556 },
{ value: 'Digsite', lng: 46.043701171875, lat: -17.266727823520508 },
{ value: 'River Salve', lng: 54.931640625, lat: -14.083301314706778 },
{ value: 'Morytania', lng: 64.610595703125, lat: -13.501814172428656 },
{ value: 'Mort Myre Swamp', lng: 59.820556640625, lat: -22.740723091194727 }
];
It uses browserify to get it. So, I do this:
var locations = require('./locations');
What would be the best way to add all of those into LayerGroup()? I mean, because doing var fairy = L.layerGroup([One, Two, Three...]); by hand would get tiresome.
So how would I go about adding all of those markers into a new layer (so I can toggle them on/off)

How about adding an empty L.LayerGroup, looping over your array and adding them to that layer?
var locations = [];
var layer = L.layerGroup().addTo(map);
locations.forEach(function (location) {
L.marker([location.lat, location.lng])
.bindPopup(location.value)
.addTo(layer);
});
Working example on Plunker: http://plnkr.co/edit/Q0DGqs?p=preview