I'm working on a product that will show information about individual counties in Wisconsin. Is it possible to programmatically write the county's name on the map? The only option I've seen to do this is by creating a tile layer.
I've written a blog post on how to achieve this here: http://rbrundritt.wordpress.com/2012/03/31/label-pushpins-in-bing-maps-v7/
Here is the code sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
{
credentials:"YOUR_BING_MAPS_KEY"
});
var labelPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0,0),{
text : 'Custom Label', //The text for the label
typeName : 'labelPin', //Assign a CSS class to the pin
anchor : new Microsoft.Maps.Point(0,0), //Reset the anchor point of the pin to make aligning the text easier.
textOffset : new Microsoft.Maps.Point(-45,0) //Adjust textOffset point for better label positioning
//Adjust the x value as you see fit for better centering of text
});
map.entities.push(labelPin);
}
</script>
<style>
/* Allow div of pushpin to display overflowing content */
.labelPin{
overflow:visible !important;
}
/* Hide the default pushpin, Alternatively point the icon property of the pushpin to a transparent image */
.labelPin img{
display:none;
}
/*Use this to style the text*/
.labelPin div{
white-space:nowrap;
color:blue !important;
}
</style>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
</body>
</html>
Just use a Pushpin with a custom image, and set the custom image to a transparent image, so all you see is the Pushpin text. To make it real easy, you can even specify a base64 encoded transparent image inline directly, as shown below:
var pushpinOptions = {
icon: "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",/* Transparent 1px x 1px gif with a 1bit palette, created with gimp and encoded with base64 tool in linux.*/
text: 'Your county name goes here',
draggable: false,
visible: true,
};
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, - 122.33), pushpinOptions);
I am not sure what you are using for the back end but the way I would accomplish this is by doing the following:
ajax call back to the server, get an object that returns the following or something similar
{CountyName = 'Iron', latitude = '23', longitude = -100}
on the call back iterate though that and populate custom info boxes.
Related
The below code is to find a location on map, once the location is entered in a textbox.Please note in the below code that I am using 'locator' instead of 'geocoder' as i would like to have custom textbox instead of the textbox provided by the 'esri/dijit/geocoder' and also i would like to get the geocoordinates values using locator.
In the below code, i would like to add 'autocomplete' feature in textbox that has the same functionality as of 'autocomplete' feature in 'geocoder'.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Find Address</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<style>
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
#map{
padding:0;
border:solid 1px #343642;
margin:5px 5px 5px 0px;
}
#leftPane{
width:20%;
border-top: solid 1px #343642;
border-left: solid 1px #343642;
border-bottom: solid 1px #343642;
margin:5px 0px 5px 5px;
color: #343642;
font:100% Georgia,"Times New Roman",Times,serif;
/*letter-spacing: 0.05em;*/
}
</style>
<script src="http://js.arcgis.com/3.12/"></script>
<script>
var map, locator;
require([
"esri/map", "esri/tasks/locator", "esri/graphic",
"esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/Font", "esri/symbols/TextSymbol",
"dojo/_base/array", "esri/Color",
"dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",
"dijit/form/Button", "dijit/form/Textarea",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, Locator, Graphic,
InfoTemplate, SimpleMarkerSymbol,
Font, TextSymbol,
arrayUtils, Color,
number, parser, dom, registry
) {
parser.parse();
map = new Map("map", {
basemap: "streets",
center: [-93.5, 41.431],
zoom: 5
});
locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
locator.on("address-to-locations-complete", showResults);
// listen for button click then geocode
registry.byId("locate").on("click", locate);
map.infoWindow.resize(200,125);
function locate() {
map.graphics.clear();
var address = {
"SingleLine": dom.byId("address").value
};
locator.outSpatialReference = map.spatialReference;
var options = {
address: address,
outFields: ["Loc_name"]
};
locator.addressToLocations(options);
}
function showResults(evt) {
var symbol = new SimpleMarkerSymbol();
var infoTemplate = new InfoTemplate(
"Location",
"Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"
);
symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setColor(new Color([153,0,51,0.75]));
var geom;
arrayUtils.every(evt.addresses, function(candidate) {
console.log(candidate.score);
if (candidate.score > 80) {
console.log(candidate.location);
var attributes = {
address: candidate.address,
score: candidate.score,
locatorName: candidate.attributes.Loc_name
};
geom = candidate.location;
var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
//add a graphic to the map at the geocoded location
map.graphics.add(graphic);
//add a text symbol to the map listing the location of the matched address.
var displayText = candidate.address;
var font = new Font(
"16pt",
Font.STYLE_NORMAL,
Font.VARIANT_NORMAL,
Font.WEIGHT_BOLD,
"Helvetica"
);
var textSymbol = new TextSymbol(
displayText,
font,
new Color("#666633")
);
textSymbol.setOffset(0,8);
map.graphics.add(new Graphic(geom, textSymbol));
return false; //break out of loop after one candidate with score greater than 80 is found.
}
});
if ( geom !== undefined ) {
map.centerAndZoom(geom, 12);
}
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar', gutters:false"
style="width:100%; height:100%;">
<div id="leftPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'left'">
Enter an address then click the locate button to use a sample address locator to return the location for
street addresses in the United States.
<br>
<textarea id="address">380 New York St, Redlands</textArea>
<br>
<button id="locate" data-dojo-type="dijit/form/Button">Locate</button>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
How to add 'autocomplete' feature in this code?
What do you mean by using your own custom textbox provided by esri/dijit/geocoder? The Geocoder dijit comes with default ESRI css to style the dijit, but nothing prevents you from overriding this with your own styles.
For instance you could add a class in your body tag to override the claro styles:
<body class="claro custom">
This way esri dijits will use claro by default, but if you define the same css selectors as the esri dijit and append them with your custom class, the dijit will use that instead. Here's a short example where we override 2 properties of the results element in the Geocoder:
/* Custom styles for the Geocoder dijit */
.custom #myGeocoder .esriGeocoderResults {
overflow: visible;
z-index: 1000 !important;
}
The geocode dijit supports autocomplete using either the default locator or custom ones. Since you are referencing the default locator service you can just use the dijit and pass autoComplete in the options
<script>
var map, geocoder;
require([
"esri/map", "esri/dijit/Geocoder", "dojo/domReady!"
], function(Map, Geocoder) {
map = new Map("map",{
basemap: "gray",
center: [-120.435, 46.159], // lon, lat
zoom: 7
});
geocoder = new Geocoder({
map: map,
autoComplete : true
}, "search");
geocoder.startup();
});
</script>
I am using Bing Maps v7 and created a draggable pushpin. i have taken code from here.
http://www.garzilla.net/vemaps/Draggable-Push-Pins-with-Bing-Maps-7.aspx
I need to restrict the drag outside of visible map area.
I have a defined map area with zoom pan disabled and with draggable pin where user can put there pin.
issue: pushpin is draggable outside of map then no option to get that back.
On the Pushpin class, you have several events to manage the action that are done on drag start, drag and drag end, see on MSDN: http://msdn.microsoft.com/en-us/library/gg427615.aspx
So, to be simple, all you have to do is to handle the event of your choice (in your case, I would recommend to use drag on the pushpin) and cancel the event or just modify by yourself the location of the pushpin.
See a live example where the pushpin is restricted to a minimal latitude value (you can update the drag event to be able to restrict to a specific area based on your current map view):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps AJAX V7 - Restricted draggable pushpin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var minLatitude = 49;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myMap'),
{
credentials: 'YOURKEY',
center: new Microsoft.Maps.Location(50, 3),
zoom: 6
});
}
function addDraggablePushpin()
{
var pushpinOptions = {draggable: true};
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
map.entities.push(pushpin);
Microsoft.Maps.Events.addHandler(pushpin, 'drag', function() {
var loc = pushpin.getLocation();
// Verify if it's in a certain area if not, cancel event
if(loc.latitude < minLatitude) {
pushpin.setLocation(new Microsoft.Maps.Location(minLatitude, loc.longitude));
}
});
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div>
<input type="button" value="AddDraggablePushpin" onclick="addDraggablePushpin();" />
</div>
</body>
</html>
I have a little trouble regarding the positioning of a flash movie in the facebook canvas.
The flash movie has a size of 760x600 px. So i have set the facebook app advanced setting of the canvas width to fixed(760 px) and height to fixed (800 px).
The problem is, that i get a horizontal scroll bar and only 750 px of the flash movie are shown, because the flash movie seems to be aligned at canvas.x = 10 px and not at x = 0 px.
Is there a way to set the position of the flash movie? Preferably in Flash-As3?
Thanks in advance!
Update
Thanks for the input Niraj! Unfortunately i have never done anything with CSS. Here is my "index.html", would you tell me how to integrate your example into the html code?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Include support librarys first -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div><!-- required div -->
<div id="flashContent">
<h1>You need at least Flash Player 10.2 to view this page.</h1>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
<script type="text/javascript">
//This example uses dynamic publishing with swfObject. Login is handled in the swf
//Note we are passing in attribute object with a 'name' property that is same value as the 'id'. This is REQUIRED for Chrome/Mozilla browsers
swfobject.embedSWF("example.swf", "flashContent", "760", "600", "10.1", null, null, null, {name:"flashContent"});
// redirect
function redirect(id,perms,uri)
{
var params =
window.location.toString().slice(window.location.toString().indexOf('?'));
top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+id+'&scope='+perms+'&redirect_uri='+uri+params;
}
</script>
</body>
</html>
Thanks alot!
You problem lies in your Flash Page. You should remove margins from the HTML page that embeds the flash and use the Javacript SDK to resize the page using setAutoGrow() function. The overflow: hidden will remove the scrollbars too.
Example CSS:
body {
margin: 0;
overflow: hidden;
}
Edit:
In the <head> tag of your page, add in:
<style type="text/css">
html, body {
margin: 0;
overflow: hidden;
}
</style>
How to do add multiple pushpins to the Bing map v7 through Ajax API.. ?
They could be loaded from a array, list, json or anywhere else..
could someone provide a small example? Thank you
You can use EntityCollection to add several pins at the same time.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-de" type="text/javascript" charset="UTF-8"></script>
</head>
<body onload="init()">
<div id="map" style="position: relative; width: 800px; height: 300px;"></div>
<script type="text/javascript">
function init(){
// Initialize the map
var map = new Microsoft.Maps.Map(
document.getElementById("map"),
{
credentials: "YOUR-BING-KEY",
mapTypeId: Microsoft.Maps.MapTypeId.road
}
);
// Creates a collection to store multiple pins
var pins = new Microsoft.Maps.EntityCollection();
// Creates 5 random pins
for (var i = 0; i < 5; i++){
// A random position
var position = new Microsoft.Maps.Location(Math.random() * 45, Math.random() * 90);
// Creates a Pushpin
var pin = new Microsoft.Maps.Pushpin(position);
// Adds the pin to the collection instead of adding it directly to the Map
pins.push(pin);
}
// Adds all pins at once
map.entities.push(pins);
}
</script>
</body>
</html>
Also, here another example using JSON and jQuery.
I have created a facebook iframe application and set the dimensions to Auto Resize in the Facebook Application settings page but still a horizontal scrollbar is shown at the bottom in IE and Google Chrome. Works fine in Firefox. Any solution ?
It's explained how to do this here:
http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html
Basically you should use
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
};
plus make sure that your html and body tags are set to overflow:hidden so you don't get those briefly shown scroll bars that are so annoying
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
<head>
<!-- Header stuff -->
</head>
<body style="overflow: hidden">
You also need to start the timer to call autoresize code. In your applications HTML do:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
};
Above code will check the content dimensions every 100ms. If you want to use different timing you can pass milliseconds as variable:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize(50);
};
If your content size does not change after page load you can save CPU cycles by changing the content size just once manually:
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
You can even pass the desired size as parameter
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 600 });
}
Facebook must remove SCROLLING="YES" attribute of iframe of canvas app and append overflow:auto to style attribute
OR provide us with a function by which we can change scrolling attribute value to NO according to our apps.
I've tried everything you said and looked at this two links either ( CSS + FireFox: hiding scrollbar on iframe with scrolling=yes - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.
What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).
I hope this help you.
Might sound obvious, but have you tried CSS overflow: hidden on the iFrame?
I have had this problem in the past. While resizing might work, there is a maximum width on the Facebook canvas. It is likely that your body element has some kind of default padding / margin, and therefore it's box is bigger than the max width.
Try using a reset style sheet that clears default styles: http://developer.yahoo.com/yui/3/cssreset/
I've tried many things listed here, but what really worked was:
Configurations -> Advanced -> Canvas Settings, set a fixed width and height
It's also important to notice that if you don't provide a privacy policy url, facebook won't save this configurations.
Being frustrated about this problem of Firefox for a long time, finally found the best solution, which is here from Roses Mark. She proposed several ways, however only the body onload stably removes scrollbar in Firefox 10.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>
Horizontal scrollbars are always caused by the width of your HTML page being larger than the area of the iframe.
Make sure you set the right width to your or containing .
Set the width in your CSS file and set the overflow property.
If it's a Tab iframe app you can set it like this:
body{
width:510px;
overflow:hidden;
}
Apart from this code:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
};
Also update Canvas Height setting in FB developer app settings:
Set canvas height to Fixed instead of Fluid. This will remove horizontal and vertical scroll bars.
Well, I will share some techniques collected from several resources that can be implemented to get rid of your unwanted scroll bars of your iframe facebook app. So, here is the first technique:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>
Using Latest Javascript Facebook SDK [Without using Body OnLoad]
window.fbAsyncInit = function() {
FB.init({
appId : '142388952486760',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoResize(); //set size according to iframe content size
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Using the Old Facebook Javascript SDK
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>
I might be late but I have very easy solution.
this might help
inside the page plugin div:
<div class="coverhack"></div>
and on css:
.coverhack {
position: absolute;
width: 520px;
height: 440px;
background-color: rgba(0, 0, 0, 0);
bottom: 0;
}
what have I done is only covering the scrollable part so it cant be scrolled. not might be the perfect answer but it works the same with the fastest delay among all answers.
I found the perfect solution! Make sure to put the following CSS code into the <head> area:
<style>*{margin:0;padding:0;}</style>
The scrollbars are actually shown because there is a default padding or margin given. Hope I could help!