Here Maps Add Info bubble to map when using Vue
Trying to add info bubble to map in my heremap vue component (ive taken bits from https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework and also https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here)
I have a couple of methods on my component(mostly copied over from the here docs)
methods:{
AddMarkerToGroup(group, location, icon) {
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
group.addEventListener('tap', function (evt) {
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
this.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
}`
However i cant get the info bubble to display when the map marker is clicked. this.ui is undefined in the context of this event listener. Outside the event listener it isn't undefined. ui is defined in the mounted component event:
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
Does anybody know how to get info bubble to display?
vuejs2 here-api
|
show 4 more comments
Trying to add info bubble to map in my heremap vue component (ive taken bits from https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework and also https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here)
I have a couple of methods on my component(mostly copied over from the here docs)
methods:{
AddMarkerToGroup(group, location, icon) {
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
group.addEventListener('tap', function (evt) {
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
this.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
}`
However i cant get the info bubble to display when the map marker is clicked. this.ui is undefined in the context of this event listener. Outside the event listener it isn't undefined. ui is defined in the mounted component event:
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
Does anybody know how to get info bubble to display?
vuejs2 here-api
ive tried to create reference to this outside of the event listener and then use this reference inside but then i get no errors on console - good but the info marker still doesn't appear.
– JimmyShoe
Nov 16 '18 at 12:29
Have you declared ui like this data: () => ({ ui: null }) ? If yes, then please share your entire js code so that we can assist you better.
– HERE Developer Support
Nov 16 '18 at 13:10
jsfiddle.net/f7hjaw5q - the javascript section contains the entire javascript of my HereMap.vue component. Too large to post in comment. --left in alert i was using for debugging Thanks
– JimmyShoe
Nov 16 '18 at 13:14
@HEREDeveloperSupport are there any plans for a vue npm library for here maps?
– JimmyShoe
Nov 16 '18 at 16:09
Hey @JimmyShoe, have you seen my tutorial that includes InfoBubbles with Vue? developer.here.com/blog/…
– Nic Raboy
Nov 19 '18 at 18:32
|
show 4 more comments
Trying to add info bubble to map in my heremap vue component (ive taken bits from https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework and also https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here)
I have a couple of methods on my component(mostly copied over from the here docs)
methods:{
AddMarkerToGroup(group, location, icon) {
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
group.addEventListener('tap', function (evt) {
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
this.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
}`
However i cant get the info bubble to display when the map marker is clicked. this.ui is undefined in the context of this event listener. Outside the event listener it isn't undefined. ui is defined in the mounted component event:
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
Does anybody know how to get info bubble to display?
vuejs2 here-api
Trying to add info bubble to map in my heremap vue component (ive taken bits from https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework and also https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here)
I have a couple of methods on my component(mostly copied over from the here docs)
methods:{
AddMarkerToGroup(group, location, icon) {
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
group.addEventListener('tap', function (evt) {
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
this.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
}`
However i cant get the info bubble to display when the map marker is clicked. this.ui is undefined in the context of this event listener. Outside the event listener it isn't undefined. ui is defined in the mounted component event:
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
Does anybody know how to get info bubble to display?
vuejs2 here-api
vuejs2 here-api
asked Nov 16 '18 at 12:03
JimmyShoeJimmyShoe
245
245
ive tried to create reference to this outside of the event listener and then use this reference inside but then i get no errors on console - good but the info marker still doesn't appear.
– JimmyShoe
Nov 16 '18 at 12:29
Have you declared ui like this data: () => ({ ui: null }) ? If yes, then please share your entire js code so that we can assist you better.
– HERE Developer Support
Nov 16 '18 at 13:10
jsfiddle.net/f7hjaw5q - the javascript section contains the entire javascript of my HereMap.vue component. Too large to post in comment. --left in alert i was using for debugging Thanks
– JimmyShoe
Nov 16 '18 at 13:14
@HEREDeveloperSupport are there any plans for a vue npm library for here maps?
– JimmyShoe
Nov 16 '18 at 16:09
Hey @JimmyShoe, have you seen my tutorial that includes InfoBubbles with Vue? developer.here.com/blog/…
– Nic Raboy
Nov 19 '18 at 18:32
|
show 4 more comments
ive tried to create reference to this outside of the event listener and then use this reference inside but then i get no errors on console - good but the info marker still doesn't appear.
– JimmyShoe
Nov 16 '18 at 12:29
Have you declared ui like this data: () => ({ ui: null }) ? If yes, then please share your entire js code so that we can assist you better.
– HERE Developer Support
Nov 16 '18 at 13:10
jsfiddle.net/f7hjaw5q - the javascript section contains the entire javascript of my HereMap.vue component. Too large to post in comment. --left in alert i was using for debugging Thanks
– JimmyShoe
Nov 16 '18 at 13:14
@HEREDeveloperSupport are there any plans for a vue npm library for here maps?
– JimmyShoe
Nov 16 '18 at 16:09
Hey @JimmyShoe, have you seen my tutorial that includes InfoBubbles with Vue? developer.here.com/blog/…
– Nic Raboy
Nov 19 '18 at 18:32
ive tried to create reference to this outside of the event listener and then use this reference inside but then i get no errors on console - good but the info marker still doesn't appear.
– JimmyShoe
Nov 16 '18 at 12:29
ive tried to create reference to this outside of the event listener and then use this reference inside but then i get no errors on console - good but the info marker still doesn't appear.
– JimmyShoe
Nov 16 '18 at 12:29
Have you declared ui like this data: () => ({ ui: null }) ? If yes, then please share your entire js code so that we can assist you better.
– HERE Developer Support
Nov 16 '18 at 13:10
Have you declared ui like this data: () => ({ ui: null }) ? If yes, then please share your entire js code so that we can assist you better.
– HERE Developer Support
Nov 16 '18 at 13:10
jsfiddle.net/f7hjaw5q - the javascript section contains the entire javascript of my HereMap.vue component. Too large to post in comment. --left in alert i was using for debugging Thanks
– JimmyShoe
Nov 16 '18 at 13:14
jsfiddle.net/f7hjaw5q - the javascript section contains the entire javascript of my HereMap.vue component. Too large to post in comment. --left in alert i was using for debugging Thanks
– JimmyShoe
Nov 16 '18 at 13:14
@HEREDeveloperSupport are there any plans for a vue npm library for here maps?
– JimmyShoe
Nov 16 '18 at 16:09
@HEREDeveloperSupport are there any plans for a vue npm library for here maps?
– JimmyShoe
Nov 16 '18 at 16:09
Hey @JimmyShoe, have you seen my tutorial that includes InfoBubbles with Vue? developer.here.com/blog/…
– Nic Raboy
Nov 19 '18 at 18:32
Hey @JimmyShoe, have you seen my tutorial that includes InfoBubbles with Vue? developer.here.com/blog/…
– Nic Raboy
Nov 19 '18 at 18:32
|
show 4 more comments
1 Answer
1
active
oldest
votes
These blogs were really useful:
https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework
https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here
https://developer.here.com/blog/searching-for-points-of-interest-with-the-here-places-api-in-a-vue.js-application
My problem was I forgot to add the reference to the stylesheet.
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
dont forget to add the script files:
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-places.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
My HereMap.vue component in full:
`<template>
<div class="here-map">
<div ref="map" v-bind:style="{ width: width, height: height }"></div>
</div>
</template>`
<script>
export default {
name: "HereMap",
data() {
return {
map: {},
platform: {},
router:{},
geocoder:{},
directions:,
ui: null
}
},
props: {
appId: String,
appCode: String,
lat: String,
lng: String,
width: String,
height: String
},
created: function() {
this.platform = new H.service.Platform({
"app_id": this.appId,
"app_code": this.appCode,
'useHTTPS': true,
'useCIT': true
});
this.router = this.platform.getRoutingService();
this.geocoder = this.platform.getGeocodingService();
},
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
methods:{
AddMarkerToGroup(group, location, icon) {
console.log(location);
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
var self = this;
var position;
group.addEventListener('tap', function (evt) {
position = evt.target.getPosition();
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
self.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
},
LoadMapLocations(){
let locations = [
{ Name: "Wolverhampton" , Latitude:52.5914143, Longitude: -2.1496674, Data: "wolverhampton meeting" },
{ Name: "London" , Latitude:51.5048147, Longitude: -0.121162, Data: "london meeting" },
{ Name: "Manchester" , Latitude:53.4757539, Longitude: -2.2791187, Data: "manchester meeting" }
];
this.addMarkersToMap(locations,"https://image.flaticon.com/icons/png/512/33/33622.png");
},
ZoomToLocation(lat,long,zoom){
console.log("zoom to location ");
this.map.setCenter({ lat: lat, lng: long });
this.map.setZoom(zoom);
}
}
};
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53337539%2fhere-maps-add-info-bubble-to-map-when-using-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
These blogs were really useful:
https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework
https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here
https://developer.here.com/blog/searching-for-points-of-interest-with-the-here-places-api-in-a-vue.js-application
My problem was I forgot to add the reference to the stylesheet.
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
dont forget to add the script files:
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-places.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
My HereMap.vue component in full:
`<template>
<div class="here-map">
<div ref="map" v-bind:style="{ width: width, height: height }"></div>
</div>
</template>`
<script>
export default {
name: "HereMap",
data() {
return {
map: {},
platform: {},
router:{},
geocoder:{},
directions:,
ui: null
}
},
props: {
appId: String,
appCode: String,
lat: String,
lng: String,
width: String,
height: String
},
created: function() {
this.platform = new H.service.Platform({
"app_id": this.appId,
"app_code": this.appCode,
'useHTTPS': true,
'useCIT': true
});
this.router = this.platform.getRoutingService();
this.geocoder = this.platform.getGeocodingService();
},
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
methods:{
AddMarkerToGroup(group, location, icon) {
console.log(location);
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
var self = this;
var position;
group.addEventListener('tap', function (evt) {
position = evt.target.getPosition();
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
self.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
},
LoadMapLocations(){
let locations = [
{ Name: "Wolverhampton" , Latitude:52.5914143, Longitude: -2.1496674, Data: "wolverhampton meeting" },
{ Name: "London" , Latitude:51.5048147, Longitude: -0.121162, Data: "london meeting" },
{ Name: "Manchester" , Latitude:53.4757539, Longitude: -2.2791187, Data: "manchester meeting" }
];
this.addMarkersToMap(locations,"https://image.flaticon.com/icons/png/512/33/33622.png");
},
ZoomToLocation(lat,long,zoom){
console.log("zoom to location ");
this.map.setCenter({ lat: lat, lng: long });
this.map.setZoom(zoom);
}
}
};
add a comment |
These blogs were really useful:
https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework
https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here
https://developer.here.com/blog/searching-for-points-of-interest-with-the-here-places-api-in-a-vue.js-application
My problem was I forgot to add the reference to the stylesheet.
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
dont forget to add the script files:
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-places.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
My HereMap.vue component in full:
`<template>
<div class="here-map">
<div ref="map" v-bind:style="{ width: width, height: height }"></div>
</div>
</template>`
<script>
export default {
name: "HereMap",
data() {
return {
map: {},
platform: {},
router:{},
geocoder:{},
directions:,
ui: null
}
},
props: {
appId: String,
appCode: String,
lat: String,
lng: String,
width: String,
height: String
},
created: function() {
this.platform = new H.service.Platform({
"app_id": this.appId,
"app_code": this.appCode,
'useHTTPS': true,
'useCIT': true
});
this.router = this.platform.getRoutingService();
this.geocoder = this.platform.getGeocodingService();
},
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
methods:{
AddMarkerToGroup(group, location, icon) {
console.log(location);
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
var self = this;
var position;
group.addEventListener('tap', function (evt) {
position = evt.target.getPosition();
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
self.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
},
LoadMapLocations(){
let locations = [
{ Name: "Wolverhampton" , Latitude:52.5914143, Longitude: -2.1496674, Data: "wolverhampton meeting" },
{ Name: "London" , Latitude:51.5048147, Longitude: -0.121162, Data: "london meeting" },
{ Name: "Manchester" , Latitude:53.4757539, Longitude: -2.2791187, Data: "manchester meeting" }
];
this.addMarkersToMap(locations,"https://image.flaticon.com/icons/png/512/33/33622.png");
},
ZoomToLocation(lat,long,zoom){
console.log("zoom to location ");
this.map.setCenter({ lat: lat, lng: long });
this.map.setZoom(zoom);
}
}
};
add a comment |
These blogs were really useful:
https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework
https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here
https://developer.here.com/blog/searching-for-points-of-interest-with-the-here-places-api-in-a-vue.js-application
My problem was I forgot to add the reference to the stylesheet.
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
dont forget to add the script files:
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-places.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
My HereMap.vue component in full:
`<template>
<div class="here-map">
<div ref="map" v-bind:style="{ width: width, height: height }"></div>
</div>
</template>`
<script>
export default {
name: "HereMap",
data() {
return {
map: {},
platform: {},
router:{},
geocoder:{},
directions:,
ui: null
}
},
props: {
appId: String,
appCode: String,
lat: String,
lng: String,
width: String,
height: String
},
created: function() {
this.platform = new H.service.Platform({
"app_id": this.appId,
"app_code": this.appCode,
'useHTTPS': true,
'useCIT': true
});
this.router = this.platform.getRoutingService();
this.geocoder = this.platform.getGeocodingService();
},
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
methods:{
AddMarkerToGroup(group, location, icon) {
console.log(location);
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
var self = this;
var position;
group.addEventListener('tap', function (evt) {
position = evt.target.getPosition();
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
self.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
},
LoadMapLocations(){
let locations = [
{ Name: "Wolverhampton" , Latitude:52.5914143, Longitude: -2.1496674, Data: "wolverhampton meeting" },
{ Name: "London" , Latitude:51.5048147, Longitude: -0.121162, Data: "london meeting" },
{ Name: "Manchester" , Latitude:53.4757539, Longitude: -2.2791187, Data: "manchester meeting" }
];
this.addMarkersToMap(locations,"https://image.flaticon.com/icons/png/512/33/33622.png");
},
ZoomToLocation(lat,long,zoom){
console.log("zoom to location ");
this.map.setCenter({ lat: lat, lng: long });
this.map.setZoom(zoom);
}
}
};
These blogs were really useful:
https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework
https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here
https://developer.here.com/blog/searching-for-points-of-interest-with-the-here-places-api-in-a-vue.js-application
My problem was I forgot to add the reference to the stylesheet.
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
dont forget to add the script files:
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-places.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
My HereMap.vue component in full:
`<template>
<div class="here-map">
<div ref="map" v-bind:style="{ width: width, height: height }"></div>
</div>
</template>`
<script>
export default {
name: "HereMap",
data() {
return {
map: {},
platform: {},
router:{},
geocoder:{},
directions:,
ui: null
}
},
props: {
appId: String,
appCode: String,
lat: String,
lng: String,
width: String,
height: String
},
created: function() {
this.platform = new H.service.Platform({
"app_id": this.appId,
"app_code": this.appCode,
'useHTTPS': true,
'useCIT': true
});
this.router = this.platform.getRoutingService();
this.geocoder = this.platform.getGeocodingService();
},
mounted: function() {
// Initialize the platform object:
var pixelRatio = window.devicePixelRatio || 1;
let defaultLayers = this.platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
this.map = new H.Map(
this.$refs.map,
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
this.LoadMapLocations();
},
methods:{
AddMarkerToGroup(group, location, icon) {
console.log(location);
var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
marker.setData(location.Data);
group.addObject(marker);
},
addMarkersToMap(locations,defaultIconUrl) {
var scale = window.devicePixelRatio;
var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });
var group = new H.map.Group();
this.map.addObject(group);
var self = this;
var position;
group.addEventListener('tap', function (evt) {
position = evt.target.getPosition();
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
self.ui.addBubble(bubble);
}, false);
var addmarker = this.AddMarkerToGroup;
locations.forEach(function (location) {
addmarker(group, location, icon);
});
},
LoadMapLocations(){
let locations = [
{ Name: "Wolverhampton" , Latitude:52.5914143, Longitude: -2.1496674, Data: "wolverhampton meeting" },
{ Name: "London" , Latitude:51.5048147, Longitude: -0.121162, Data: "london meeting" },
{ Name: "Manchester" , Latitude:53.4757539, Longitude: -2.2791187, Data: "manchester meeting" }
];
this.addMarkersToMap(locations,"https://image.flaticon.com/icons/png/512/33/33622.png");
},
ZoomToLocation(lat,long,zoom){
console.log("zoom to location ");
this.map.setCenter({ lat: lat, lng: long });
this.map.setZoom(zoom);
}
}
};
answered Nov 20 '18 at 10:54
JimmyShoeJimmyShoe
245
245
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53337539%2fhere-maps-add-info-bubble-to-map-when-using-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
ive tried to create reference to this outside of the event listener and then use this reference inside but then i get no errors on console - good but the info marker still doesn't appear.
– JimmyShoe
Nov 16 '18 at 12:29
Have you declared ui like this data: () => ({ ui: null }) ? If yes, then please share your entire js code so that we can assist you better.
– HERE Developer Support
Nov 16 '18 at 13:10
jsfiddle.net/f7hjaw5q - the javascript section contains the entire javascript of my HereMap.vue component. Too large to post in comment. --left in alert i was using for debugging Thanks
– JimmyShoe
Nov 16 '18 at 13:14
@HEREDeveloperSupport are there any plans for a vue npm library for here maps?
– JimmyShoe
Nov 16 '18 at 16:09
Hey @JimmyShoe, have you seen my tutorial that includes InfoBubbles with Vue? developer.here.com/blog/…
– Nic Raboy
Nov 19 '18 at 18:32