I have created a web page in angular which is using TomTom map API. I want to use my own search bar to search locations in the map instead of using the built-in search bar of tomtom map. How can I do this?
You can check very basic implementation done at: https://github.com/tomtom-international/geofences-creator
html:
<input type="text" id="search-text" class="form__input" value="San Francisco Airport">
js:
var query = document.getElementById("search-text").value;
fuzzySearch(query)
.then(getAdditionalData)
.then(processAdditionalDataResponse);
function fuzzySearch(query) {
return tomtom
.fuzzySearch()
.query(query)
.go()
.then(function(result) {
return result;
});
}
There is also a tutorial that covers an application that have builtin search box adjusted. You can also check it: https://developer.tomtom.com/maps-sdk-web/tutorials-use-cases/pizza-delivery
Related
I need you help. I use the Plugin WP GPX MAPS together with another google map (integrated in sabai google maps) plugin. unfortunately the map of WP GPX maps is not showing up because of "a javascript error that is telling there are 2 instances of Google Maps API being loaded"
I have already searched for a solution in stackoverflow and found out that I have to add this code line
google.maps.event.trigger(map, "resize");
in my js file wp-gpx-maps.js https://github.com/wp-plugins/wp-gpx-maps/blob/master/WP-GPX-Maps.js
but I do not know if this is right and where in wp-gpx-maps.js I have to include this line.
can you pls. help me and point out in which line I have to put google.maps.event.trigger(map, "resize");
thank you very much!
See Problem here https://www.tourendatenbank.com/touren/gipfel/gangolfsberg
it's only a compatibility problem with your tab plugin.
this is your code:
jQuery(document).ready(function() {
var sabai_wpgpxmaps = function() {
<<wp-gpx-maps code>>
};
if (jQuery("#sabai-inline-content-wpgpxmaps").is(":visible")) {
sabai_wpgpxmaps();
} else {
jQuery("#sabai-inline-content-wpgpxmaps-trigger").on("shown.bs.sabaitab", function(e, data){
sabai_wpgpxmaps();
});
}
});
the function sabai_wpgpxmaps is never been called
I have studied the ASP.Net boilderplate template (http://www.aspnetboilerplate.com/Templates) and made some custom changes.
I have a "GetComponentDataList()" method in my services. I played around with that and rendered it as a list like shown here:
<!-- Component list -->
<ul class="list-group" ng-repeat="component in vm.components">
<div class="list-group-item">
<br />
<span>Entry:</span>
<span>{{component.entry}}</span>
</div>
</ul>
components.js code:
vm.refreshComponents = function () {
abp.ui.setBusy( //Set whole page busy until getComponentDataList complete
null,
componentDataService.getComponentDataList( //Call application service method directly from javascript
).success(function (data) {
vm.components = data.componentData;
})
);
};
Now I would like to render the components via jTable. jTable expects an action to get the list of data:
listAction: '/api/services/app/componentData/GetComponentDataList',
How do I use jTable from boilerplate template?
1. Do I need to add a method in my "HomeController" to use jTable?
2. The result of my "GetComponentDataList" method in my service is of type IOutputDto.
That means the result of my service is not directly a list. There is one indirection
level inbetween. Seems like this does not fit together.
3. Can I provide a function in my JS-ViewModel and use that function instead of an action URL?
Any hint would be awesome.
Thx.
I'm working on a sample project to work ABP with jTable. I did not finish it yet. But you can check it. https://github.com/aspnetboilerplate/aspnetboilerplate-samples/tree/master/AbpWithjTable
Add abp.jtable.js to your file (https://github.com/aspnetboilerplate/aspnetboilerplate-samples/blob/master/AbpWithjTable/AbpjTable.Web/App/Main/libs/abp.jtable.js) after all ABP and jtable scripts.
See example js: https://github.com/aspnetboilerplate/aspnetboilerplate-samples/blob/master/AbpWithjTable/AbpjTable.Web/App/Main/views/people/people.js
See example C# App service: https://github.com/aspnetboilerplate/aspnetboilerplate-samples/blob/master/AbpWithjTable/AbpjTable.Application/People/PersonAppService.cs
I was fiddling a bit with Here Maps and with some some of the examples Here Javascript API Explorer and Here Maps on GitHub.
I tried to see if there's already a way to just add a visual bearing attribute in addition to longitude and latitude and have something like a small tip appear to the marker. This feels like something that many would like to have, so just to check I haven't missed anything obvious...
Is there a way to add visual bearing information to markers?
If not, does anyone know if there's an example of using a custom marker to achieve this I just couldn't locate?
There is no bearing/heading control ready available within the API - you will have to create a custom map component of your own. The usual way of doing this would be to inject some HTML as a new DOM element within the map control.
Firstly define your custom HtmlControl as shown:
function extend(B, A) {
function I() {}
I.prototype = A.prototype;
B.prototype = new I();
B.prototype.constructor = B;
}
function HtmlControl (html, id) {
nokia.maps.map.component.Component.call(this);
this.init(html, id);
}
extend(HtmlControl,
nokia.maps.map.component.Component);
HtmlControl.prototype.init = function (html, id) {
that = this;
that.id = id
that.set("node", document.createElement("div"));
that.node.innerHTML = html;
};
HtmlControl.prototype.getId = function() {
return "HtmlControl." + this.id;
};
HtmlControl.prototype.attach = function(map) {
map.getUIContainer().appendChild(this.node);
};
HtmlControl.prototype.detach = function(display) {
map.getUIContainer().removeChild(this.node);
};
Then set up the map and add the custom component as shown:
htmlControl = new HtmlControl(
"<img id='compass' style='left:4em;top:1em;width:100px;height:100px' src='...'/>", "Compass");
map.components.add(htmlControl);
The source file for the <img> element will need to hold the compass image. This is most likely to be an image with due North pointing upwards since the map control is based on the Normalized Mercator projection
Alternatively look at using the Map Image API and investigate the ra parameter to rotate the map.
I have a webmap with GMaps & GEarth integrated, in order for the user to switch between different views.
I load 3 KML files and control their visibility using checkboxes. This example here uses the same function stackOverflowQuestion
When I switch views Map - Satellite - Earth I have my KMLs working on Map & Satellite view, BUT not on Earth View.
function init() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(xx, xx),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
googleEarth = new GoogleEarth(map);
google.maps.event.addListenerOnce(map, 'tilesloaded', addOverlays);
}//end init
[...]
function OnOffKML(i) {
if(currentKmlObjects[i].getMap() === null) {
currentKmlObjects[i].setMap(map);
}
else {
currentKmlObjects[i].setMap(null);
}
}
this function works for Google Maps Api 3, but not for Google Earth plugin...
Does this mean I have to use the fetch{} for it to show on GE? Is there a workaround?
Could I exclude my toggleKML{} for the earth view in any way?
OK,
The problem here is that we cannot code for GM Api 3 and expect to have results for GE Api as well.
Sure the two can be integrated but you have to decide that one of the two will have limited functionality.
Thus I decided to split the application up, work separately and efficiently.
As for GE method for KML usage, I have used the fetch{} function, along with checkbox selection.
That is not strictly true, you would just need to reload your Kml into the earth API.
You could modify your OnOffKML function to act differently depending on the current mode (earth/maps).
The problem you have currently is that you are using Google Maps Api methods, on the Google Earth plugin.
Anyhow, something like the following would work, allowing the method to handle both.
function OnOffKML(i) {
if(googleEarth.getWindow().getVisibility()) {
// code for earth api
} else {
// code for maps api
}
}
How can i post an interactive post on google+ stream?
I am trying to post some custom data on google stream from asp.net web application.
This is the code iam using.
this is .aspx page:
Tell your friends
this is the script i am using:
var moment = {
"name": "sample",
"Description": "Hi sample post",
"Thumbnail": "logo",
"image": "http://prayati.com/Images/PrayatiLogo.jpg"
};
gapi.auth.init(signinCallback);
function signinCallback(authResult) {
if (authResult['access_token']) {
gapi.interactivepost.render('inter', options);
//gapi.interactivepost.render(moment, authResult['access_token'])
gapi.interactivepost.go(moment)
document.getElementById('myBtn').setAttribute('style', 'display: none');
} else if (authResult['error']) {
alert(authResult['error']);
}
}
var options = {
contenturl: 'https://plus.google.com/pages/',
contentdeeplinkid: '/pages',
clientid: '263087742134.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
prefilltext: 'Create your Google+ Page too!',
calltoactionlabel: 'SHARE',
calltoactionurl: 'http://plus.google.com/pages/create',
calltoactiondeeplinkid: '/pages/create'
};
The first and probably most important problem is that you have a domain mismatch between your data-calltoactionurl and your data-contenturl. These must be the same domain, see the data-contenturl documentation.
I believe that is your major problem, there are other problems in your example too:
You appear to be confusing two different features: app activities (aka moments) and interactive posts. Also, it looks like you are trying to do authentication, the interactive post button is also a sign-in button, notice its data-callback parameter. You wouldn't need to do a separate call to gapi.auth.init()
The most simple approach is to use the HTML button and remove the calls to gapi.interactivepost.* unless you have a dynamic application that needs to insert buttons with great control.
You didn't post the code for your JavaScript API include, ensure that it is loading the API script as https://apis.google.com/js/client:plusone.js.
Here is a correct and simplified button:
<button class="g-interactivepost"
data-clientid="xxxxxxxxxx.apps.googleusercontent.com"
data-contenturl="http://localhost:52022/Jaswanth"
data-cookiepolicy="single_host_origin"
data-calltoactionlabel="INVITE"
data-calltoactionurl="http://localhost:52022/create"
data-prefilltext="Best site EVER!"
data-callback="signinCallback"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/plus.login">
Tell your friends
</button>