Driving directions are not supported in MapKit. so I think I can show driving direction in a webview. I am showing google maps in uiwebview, but it shows the whole site I just want to show only map part with some zoom so that it looks like original maps application of iphone. Also I don't know if this breaks the apple's Human Interface Guidelines(HIG) Rules, tell me if it is.
Load a string like this as an NSString (maybe strip the newlines). You can change the latitude and longitude, zoom level etc with stringWithFormat
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.000, 139.000);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%">
</body>
</html>
Then set your UIWebViews html to that. It will give you a page with just a map on it, allow you to scroll with your finger or zoom in, pinch zoom, and place a marker.
Use this to load the HTML:
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL
Here you go. Pass it through a stringWithFormat with twice the origin lat long and once the destination lat long, all of them as float:
[NSString stringWithformat:... , oriLat,oriLon,oriLat,oriLon,destLat,destLon];
and then pass it into a UIWebView
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
function initialize() {
var latlng = new google.maps.LatLng(%f, %f);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = new google.maps.LatLng(%f, %f);
var end = new google.maps.LatLng(%f, %f);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:300px; height:300px">
</body>
</html>
Related
I used Google Custom Search API in my project and I try to detect the following events:
Enter is pressed in the search input box;
Search button is hit;
A option is selected from the recommendation list.
I have done a lot of searches, however, my code can only capture the first event. If anyone can point me to a right direction, this will be much appreciated.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<h3 align="center">My Search</h3>
</div>
<div>
<script>
(function () {
var cx = 'xxxx:xxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<script>
function addExtraParams(){
alert($("input.gsc-input").val()); //For debugging only
};
$(document).ready(function(){
setTimeout(
function(){
$( 'input.gsc-input' ).keyup( function(e){
if ( e.keyCode == 13 ) {
addExtraParams();
}
});
$( 'input.gsc-search-button' ).click(function(){
addExtraParams();
});
$( 'input.gsc-completion-container' ).click(function(){
addExtraParams();
});
}, 1000
);
});
</script>
<gcse:search></gcse:search>
</div>
</body>
</html>
how to get a feature layer on button click and display.
S_layer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/...../MapServer/0",{
mode: FeatureLayer.MODE_SELECTION,
outFields: ["*"]
});
map.addLayer(S_layer);
function soil()
{
queryTask = new esri.tasks.QueryTask("http://localhost:6080/arcgis/rest/services/...../MapServer/0");
var query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["soil"];
var name = document.getElementById("combo1").value.toString();
query.where = "NAME = '" + name;
<!-- queryTask.execute(query); -->
S_layer.selectFeatures(query, queryTask.SELECTION_NEW, function (features) {
if(features[0]){
thePoly = features[0].geometry;
theExtent = thePoly.getExtent().expand(1.8); //Zoom out slightly from the polygon's extent
map.setExtent(theExtent);
}
});
}
<button type="button" id="btn" class = "button" class="btn-default" onclick = soil(); >Soil</button>
<br></br>
but this query does not run it gives error of "init.js:89 Error: Unable to complete operation.
at Object.g.load".
As I understood, you want to add a layer on button click.
Below is the code for this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Hydrography - Selection mode</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: white;
overflow: hidden;
font-family: sans-serif;
}
</style>
</head>
<body class="claro">
<br>
Add layers-
<button type="button" id="addWaterBodies" class = "button" >water Bodies</button>
<button type="button" id="addRivers" class = "button" >River</button> <br> <br>
<div id="map" >
</div>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/editing/Editor", "esri/dijit/editing/TemplatePicker",
"esri/tasks/GeometryService",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer",
"dojo/i18n!esri/nls/jsapi", "esri/config",
"dojo/_base/array", "dojo/keys", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map,
Editor, TemplatePicker,
GeometryService,
ArcGISDynamicMapServiceLayer, FeatureLayer,
esriBundle, esriConfig,
arrayUtils, keys, parser
) {
parser.parse();
map = new Map("map", {
basemap: "hybrid",
center: [-96.325, 37.855],
zoom: 13
});
map.infoWindow.resize(400,300);
function addWaterBodies(){
var waterBodiesLayer= map.getLayer("waterLayerId");
if(!waterBodiesLayer){
waterBodiesLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0", {
id : "waterLayerId",
outFields: ["*"],
});
map.addLayer(waterBodiesLayer);
} else {
alert("water bodies layer already added");
}
}
function addRivers(){
var riversLayer= map.getLayer("riverLayerId");
if(!riversLayer){
riversLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1", {
id:"riverLayerId",
outFields: ["*"]
});
map.addLayer( riversLayer);
} else {
alert("River layer already added");
}
}
document.getElementById("addWaterBodies").onclick = addWaterBodies;
document.getElementById("addRivers").onclick = addRivers;
});
</script>
</body>
</html>
I would like to be able to change the chart type of charts using dimple.js by using a variable. I want for instance to switch from bars to lines. I've tried with no success, it seems simple however! Any idea?
Below is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
</head>
<body>
<div id="chartContainer">
<script type="text/javascript">
var chartType = "line";
var chartDimple = "dimple.plot." + chartType;
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.csv("data/test.csv", function (data) { //d3.tsv("data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
// myChart.addSeries(null, dimple.plot.bar);
myChart.addSeries(null, chartDimple);
myChart.draw();
});
</script>
</div>
</body>
</html>
You are passing a string to myChart.addSeries instead of a dimple.plot object. To make it dynamic you would need to reference the static object you're looking for on the dimple.plot object :
var chartType = "line";
var chartDimple = dimple.plot[chartType];
myChart.addSeries(null, chartDimple);
https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.plot#static-objects
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width: 1000px; height: 600px } /* ID */
</style>
<!--Include the Maps API JavaScript using a script tag.-->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
//Function called when the window loads shown below in the addDomlistener
function initialize() {
var geocoder = new google.maps.Geocoder();
var mapOptions = { center: new google.maps.LatLng(40.5, -75.5), zoom: 8 };
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
function calcAddress(address)
{
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Got result, center the map and put it out there
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input id="address" type="text">
<input type="button" value="Search" onclick="calcAddress()" />
</div>
<div id="map-canvas"/>
</body>
</html>
I'm learning about google maps API, and I am just trying to get a simple address search to work, what am I missing? I've seen similar posts, but can't find what isn't right, might need some fresh eyes.
Varaibles map and geocoder are not visible outside of initialize() function. If you open console there is error written:
ReferenceError: geocoder is not defined
They should be made global like:
var map,
geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = { center: new google.maps.LatLng(40.5, -75.5), zoom: 8 };
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
Additionaly, div tag is not self-closing.
<div id="map-canvas"/>
should be changed to
<div id="map-canvas"></div>
I'm new to adobe air, and was trying to integrate this (http://flowplayer.electroteque.org/securedrm) plugin to adobe air application. But the video dosen't seems to be playing, using HTMLLoader inside AactionScript3. However, I m able to play any not drm related content using same code.
This is what I'hv done.
My action script contains this.
var request:URLRequest = new URLRequest("http://localhost:8888/index.html");
var bounds:Rectangle = new Rectangle(0, 0, 800, 600);
var options:NativeWindowInitOptions = new NativeWindowInitOptions();
options.systemChrome = NativeWindowSystemChrome.STANDARD;
options.type = NativeWindowType.NORMAL;
options.transparent = false;
options.resizable = true;
options.maximizable = false;
var htmlload:HTMLLoader = HTMLLoader.createRootWindow(true, options, true, bounds);
htmlload.stage.nativeWindow.notifyUser(NotificationType.INFORMATIONAL);
//htmlload.stage.nativeWindow.addEventListener(Event.CLOSING, onHTMLPageClose);
//htmlload.addEventListener(HTMLUncaughtScriptExceptionEvent.UNCAUGHT_SCRIPT_EXCEPTION, scriptError);
htmlload.stage.nativeWindow.x = stage.nativeWindow.x;
htmlload.stage.nativeWindow.y = stage.nativeWindow.y;
htmlload.stage.nativeWindow.activate();
try {
htmlload.load(request);
}
catch (e:Error) {
trace("navigate failed");
}
And this is how my index.html looks like;
<html>
<script src="http://static.electroteque.org/js/jwplayer.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="drmIdentPlayer">
</div>
<script>
jwplayer("drmIdentPlayer").setup({
flashplayer: "http://static.electroteque.org/swf/jwplayer.flash.swf",
width: 660,
height: 350,
primary: "flash",
playlist: [
{
file: "mp4:BigBuckBunnyAuth.mp4",
provider: "http://static.electroteque.org/swf/drmrtmp-provider.swf",
streamer: "rtmp://rtmp.electroteque.org/cfx/st",
}
],
plugins: {
"http://static.electroteque.org/swf/securedrm-2.0.swf": {
displayNotifications: true,
checkVersion: true
}
}
});
</script>
</html>
Have tried using flowplayer as well, but same result, here is my HTML;
<!doctype html>
<!--[if lt IE 7]>
<html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script>
<script src="http://flowplayer.electroteque.org/js/flowplayer.securedrm-3.6.js"></script>
</head>
<body>
<a id="drmplayer" style="display:block;width:660px;height:350px;"></a>
<script>
flowplayer("drmplayer",{src:"http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf",version: [10, 2]}, {
plugins: {
drm: { url: "http://static.electroteque.org/swf/flowplayer.securedrm-3.2.7.swf" },
// the "tube" skin
controls: { url: "http://releases.flowplayer.org/swf/flowplayer.controls-tube-3.2.15.swf"}
},
clip: {
url: "BigBuckBunnyAuth.f4v",
accelerated: false,
autoPlay: false,
baseUrl: "http://videos.electroteque.org"
},
log: {
level: 'debug',
filter: 'org.flowplayer.rtmp.*, org.flowplayer.securedrm.*,org.flowplayer.controller.*'
}
});
</script>
</body>
</html>
Basically I m able to play above on my local tomcat (on FireFox/Chrome). But the same is not getting played on Adobe AIR, and I believe AIR uses the same WebKit rendering engine used by the Safari web browser. Also, if i use non-drm protected content, it plays.