View test.html
<div class="sign-in-box">
<div class="sign-in-box-logo"></div>
<form id="SSTAuthForm" name="SSTAuthForm" method="post" action="/">
<input type="hidden" id="returnUrl" name="returnUrl">
<div class="sign-in-box-input-box">
<input class="sign-in-box-input-box-text" type="email" id="UserName" name="UserName" placeholder="Email">
<input class="sign-in-box-input-box-text" type="password" id="Password" name="Password" placeholder="Password">
</div>
View Tello-guide-example-sign-in.html
<div class="sign-in-box">
<div class="sign-in-box-logo"></div>
<form id="SSTAuthForm" name="SSTAuthForm" method="post" action="/">
<input type="hidden" id="returnUrl" name="returnUrl">
<div class="sign-in-box-input-box">
<input class="sign-in-box-input-box-text" type="email" id="UserName" name="UserName" placeholder="Email">
<input class="sign-in-box-input-box-text" type="password" id="Password" name="Password" placeholder="Password">
</div>
View Tello-guide-example-sign-in-component.css
@media only screen and (max-width: 900px) and (min-width: 751px),
only screen and (max-width: 1280px) and (min-width: 901px),
only screen and (min-width: 1281px)
.sign-in-box {
width: 520px;
height: 290px;
margin: 250px auto;
border-radius: 5px;
background-color: #ddd;
padding: 40px 36px;
View css-example-with-high-specificity.css
#mainContainer div p.product-desc span {
color: #ff0000;
font-weight: bold;
font-size: 14px;
}
View Mapbox-creation-api-tileLayer-bing-wrapper.js
// In our project, I had to use a custom wrapper for Mapbox's TileLayer
// b/c our ASP.NET MVC controller endpoint was originally created to
// conform to Bing map url template that uses "quadkey".
// I found this StackOverflow thread about a wrapper for Mapbox/Leaflet
// L.tileLayer to load tiles from Bing-formated urls (with "quadkey")
// http://stackoverflow.com/questions/17154781/use-bing-quadkey-tiles-instead-of-x-y-z-tiles-in-leafletjs-map
// Read about Bing Map Tile System to understand how to convert the
// two-dimensional tile XY coordinates into one-dimensional strings called "quadkeys".
var BingLayer = L.TileLayer.extend({
View Mapbox-creation-api-tileLayer.js
// create the url template
var url = 'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png';
// construct the tile layer using the url template and add it to the map
var tileLayer = L.tileLayer(url, {
zIndex: 10,
maxZoom: 20
}).addTo(map);
View Bing-map-creation-api-tileLayer.js
// Create the tile layer source
var tileSource = new Microsoft.Maps.TileSource({
uriConstructor: 'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'
});
// construct the tile layer using the tile source and make it visible on map
var tileLayer = new Microsoft.Maps.TileLayer({
zIndex: 10,
mercator: tileSource,
visible: true
View Mapbox-creation-api-map-locate.js
// try to locate the user
map.locate();
// handle location found
map.on('locationfound', function (e) {
// add a circle marker having the center at the location
L.circleMarker(e.latlng)
.setRadius(200)
.addTo(map);
View Bing-map-creation-api-geoLocationProvider.js
// Initialize the location provider
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
// Get the user's current location and pass data to callbacks
geoLocationProvider.getCurrentPosition({
errorCallBack: function() {
// code here to handle error
},
successCallback: function (data) {
// code here to handle success
View Mapbox-creation-api-layerGroup.js
// create a LayerGroup object for collecting markers
var markersLayerGroup = L.layerGroup();
// add some markers to the collection
markersLayerGroup.addLayer(marker1);
markersLayerGroup.addLayer(marker2);
// add the collection of markers LayerGroup to the map.
markersLayerGroup.addTo(map);
// or