While implementing GeoLocation in Ionic cordova with AngularJS - angularjs

I am getting below issue
Google Maps API warning: NoApiKeys
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
/*( 3959 * acos( cos( radians(-34.397) ) * cos( radians( sa.lat ) ) * cos( radians( sa.lng ) - radians(:lng) )
sin( radians(-34.397) ) * sin( radians( sa.lat ) ) ) ) < :distance */
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<div id="floating-panel">
<input id="address" type="textbox" value="Sydney, NSW">
<input id="submit" type="button" value="Geocode">
</div>
<div id="map"></div>

The error itself is self-descriptive. Just click the link and it will redirect you the following message:
The script element that loads the API has no API key. Please make sure you include a valid API key as a key parameter. You can generate a new API key on the Google API Console.
Also it provides link to guide about Obtaining an API key.
In short, you will need API key from google to run this code. Since you don't have this for now hence you are getting the warning.

Related

Video Follow on Mouse Move in React

I have this javascript function that autoplays a Vimeo video and attaches to the cursor when hovering over an element. I'm trying to figure out how to do this in React but I'm not having any luck. Originally, I was using Froogaloop and Vimeo player api which seemed to work just fine, but not in react.
Here is the code below
Script
document.getElementById("div").addEventListener("mousemove", function() {
myFunction(event);
});
var mouse;
var cursor = document.getElementById("cursor");
function myFunction(e) {
mouseX = e.clientX;
mouseY = e.clientY;
cursor.style.left = (mouseX - 55) + "px";
cursor.style.top = (mouseY - 55) + "px";
}
// play video on hover
const iframe = document.getElementById('video');
// $f == Froogaloop
const player = $f(iframe);
// bind events
var mouseEntering = document.getElementById("div");
mouseEntering.addEventListener("mouseenter", function() {
player.api("play");
});
var mouseLeaving = document.getElementById("div");
mouseLeaving.addEventListener("mouseleave", function() {
player.api("unload");
});
HTML
<div id="div" class="div">
<div id="cursor" class="cursor">
<iframe id="video" class="video" src="https://player.vimeo.com/video/649593940?api=1&loop=1&muted=1" width="400px"
height="300px" frameborder="0"></iframe>
</div>
</div>
CSS
.wrapper{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(241px,1fr));
gap: 20px;
}
.div:hover{
cursor:pointer;
}
.div:hover .cursor{
visibility:visible;
}
.cursor {
visibility:hidden;
position: absolute;
transform:translate(80px,50px);
background:red;
backface-visibility: hidden;
z-index: 9999999;
pointer-events: none; /* pointer-events: none is needed */
cursor: none;
}
.div {
background: blue;
height:200px;
width:100%;
cursor: none;
}
Here is a full working example on codepen
Any help on how to do this in react would be awesome.

Smartystreets API shows Cors Issue

I currently have a free account in SmartyStreets (aka Smarty) and need to integrate the autocomplete functionality. But after integrating the API using static values, it shows a CORS issue. Also, i have already tried the Access-Control-Allow-Origin but that also not working.
So my question is how to resolve the CORS issue?
Also, I have another question I would like to implement two other features.
autocomplete addresses and populate values in the form.
the page allows the user to type the address, send the request to SmartStreets, get the response, and display the result along with the form, empty this time, to allow the user to enter another address.
For More Details, please have a look at the below code:
Note: The Frontend code I am using is AngularJs with Typescript.
API Integration:
import { Injectable } from "#angular/core";
import { Observable } from "rxjs";
import { HttpClient, HttpParams } from "#angular/common/http";
#Injectable()
export class commonservice
{
constructor(private httpclient:HttpClient){
}
getaddressauto(): Observable<any> {
let smartauth = new HttpParams().set('auth-id',"72018252-ad10-b627-1234-970404bfd187");
let smarttoken = new HttpParams().set('auth-token',"xuwSg95g4y8AObhEv3hx");
let smartsearch = new HttpParams().set('search',"Louis");
let smartcountry = new HttpParams().set('country',"FRA");
return this.httpclient.get('https://international-autocomplete.api.smartystreets.com/lookup?'+smartauth+'&'+smarttoken+'&'+smartsearch+'&'+smartcountry) ;
}
}
<html>
<head>
<title>SmartyStreets Address Verifier</title>
</head>
<body>
<div class="p-field p-col-4">
<label for="address">Address Line 1</label>
<p-autoComplete [(ngModel)]="addressautocomplete2" [suggestions]="filteredGroup" (completeMethod)="filteraddressautocomplete($event)" (onSelect)="onEndUserSelect($event)" (onClear)="onEndUserSelect(null)" field="name" [minLength]="1" formControlName="EndUserAddressLine1">
</p-autoComplete>
<div *ngFor="let addressauto of addressautocomplete">
<p>{{addressauto.name}}</p>
</div>
</div>
</body>
</html>
You shouldn't be sending your auth-id and auth-token over the web. Use your embedded key instead.
When you use your embedded key don't forget to set the referrer header.
Smarty also has a javascript sdk that could simplify a lot of this stuff
Here is a JSFiddle that may be helpful. It seems to be what you want to accomplish as far as a call to Smarty US Autocomplete Pro, followed by a call to Smarty US Street, then filling a form with a result.
https://jsfiddle.net/x8eLpgm1/1/
$(function() {
var menu = $(".us-autocomplete-pro-menu");
var input = $("#us-autocomplete-pro-address-input");
function getSuggestions(search, selected) {
$.ajax({
url: "https://us-autocomplete-pro.api.smartystreets.com/lookup?",
data: {
// Don't forget to replace the key value with your own embedded key
"key": "21102174564513388",
"search": search,
"selected": (selected ? selected : "")
},
success: function(data) {
if (data.suggestions) {
buildMenu(data.suggestions);
} else {
noSuggestions();
}
},
error: function(error) {
return error;
}
});
}
function getSingleAddressData(address) {
$.ajax({
url: "https://us-street.api.smartystreets.com/street-address?",
data: {
// Don't forget to replace the key value with your own embedded key
"key": "21102174564513388",
"street": address[0],
"city": address[1],
"state": address[2]
},
dataType: "jsonp",
success: function(data) {
$("#zip").val(data[0].components.zipcode);
$("#data-lat").html(data[0].metadata.latitude);
$("#data-lon").html(data[0].metadata.longitude);
$("#data-county").html(data[0].metadata.county_name);
$("#data-time-zone").html(data[0].metadata.time_zone);
},
error: function(error) {
return error;
}
});
}
function clearAddressData() {
$("#city").val("");
$("#state").val("");
$("#zip").val("");
$("#data-lat").empty();
$("#data-lon").empty();
$("#data-county").empty();
$("#data-time-zone").empty();
}
function noSuggestions() {
var menu = $(".us-autocomplete-pro-menu");
menu.empty();
menu.append("<li class='ui-state-disabled'><div>No Suggestions Found</div></li>");
menu.menu("refresh");
}
function buildAddress(suggestion) {
var whiteSpace = "";
if (suggestion.secondary || suggestion.entries > 1) {
if (suggestion.entries > 1) {
suggestion.secondary += " (" + suggestion.entries + " more entries)";
}
whiteSpace = " ";
}
var address = suggestion.street_line + whiteSpace + suggestion.secondary + " " + suggestion.city + ", " + suggestion.state + " " + suggestion.zipcode;
var inputAddress = $("#us-autocomplete-pro-address-input").val();
for (var i = 0; i < address.length; i++) {
var theLettersMatch = typeof inputAddress[i] == "undefined" || address[i].toLowerCase() !== inputAddress[i].toLowerCase();
if (theLettersMatch) {
address = [address.slice(0, i), "<b>", address.slice(i)].join("");
break;
}
}
return address;
}
function buildMenu(suggestions) {
var menu = $(".us-autocomplete-pro-menu");
menu.empty();
suggestions.map(function(suggestion) {
var caret = (suggestion.entries > 1 ? "<span class=\"ui-menu-icon ui-icon ui-icon-caret-1-e\"></span>" : "");
menu.append("<li><div data-address='" +
suggestion.street_line + (suggestion.secondary ? " " + suggestion.secondary : "") + ";" +
suggestion.city + ";" +
suggestion.state + "'>" +
caret +
buildAddress(suggestion) + "</b></div></li>");
});
menu.menu("refresh");
}
$(".us-autocomplete-pro-menu").menu({
select: function(event, ui) {
var text = ui.item[0].innerText;
var address = ui.item[0].childNodes[0].dataset.address.split(";");
var searchForMoreEntriesText = new RegExp(/(?:\ more\ entries\))/);
input.val(address[0]);
$("#city").val(address[1]);
$("#state").val(address[2]);
if (text.search(searchForMoreEntriesText) == "-1") {
$(".us-autocomplete-pro-menu").hide();
getSingleAddressData(address);
} else {
$("#us-autocomplete-pro-address-input").val(address[0] + " ");
var selected = text.replace(" more entries", "");
selected = selected.replace(",", "");
getSuggestions(address[0], selected);
}
}
});
$("#us-autocomplete-pro-address-input").keyup(function(event) {
if (input.val().length > 0 || input.val() === "") clearAddressData();
if (event.key === "ArrowDown") {
menu.focus();
menu.menu("focus", null, menu.menu().find(".ui-menu-item"));
} else {
var textInput = input.val();
if (textInput) {
menu.show();
getSuggestions(textInput);
} else {
menu.hide();
}
}
});
$(".us-autocomplete-pro-menu").css("width", ($("#us-autocomplete-pro-address-input").width() + 24) + "px")
});
.us-autocomplete-pro-example {
font-family: helvetica;
color: #0a0a0a;
text-align: center;
}
.us-autocomplete-pro-example .container {
background-color: #ddd;
padding: 2em;
}
.us-autocomplete-pro-example .container label {
color: #0a0a0a;
}
.us-autocomplete-pro-example .container input {
font-size: 16px;
padding: 0 .75em;
border: 1px solid #ccc;
color: #0a0a0a;
height: 3em;
box-sizing: border-box;
width: 100%;
margin-top: .5em;
}
.us-autocomplete-pro-example .container input:disabled {
background-color: #eee;
color: #999;
}
.us-autocomplete-pro-example .container .us-autocomplete-pro-input-container {
margin: 0 auto 2em;
width: 60%;
}
.us-autocomplete-pro-example .container .us-autocomplete-pro-menu {
overflow-y: scroll;
max-height: 13em;
box-shadow: 0 7px 7px rgba(0, 0, 0, 0.12);
color: #7d7d7d;
position: absolute;
text-align: left;
width: inherit;
z-index: 10;
}
.us-autocomplete-pro-example .container .us-autocomplete-pro-menu li div {
padding: .75em;
}
.us-autocomplete-pro-example .container .us-autocomplete-pro-menu b {
color: #0a0a0a;
}
.us-autocomplete-pro-example .container .us-autocomplete-pro-menu .ui-menu-item-wrapper {
padding-left: 1em;
}
.us-autocomplete-pro-example .container .labels {
display: inline-block;
font-weight: bold;
width: 40%;
}
.us-autocomplete-pro-example .container .data {
display: inline-block;
padding-left: 1em;
width: 50%;
}
.us-autocomplete-pro-example .docs-pricing-links {
font-weight: bold;
margin-top: 2em;
}
.inline {
display: inline-block;
vertical-align: top;
width: 40%;
}
.data-container {
text-align: center;
margin-bottom: 2em;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<div class="content-white us-autocomplete-pro-example">
<h2>US Autocomplete Pro</h2>
<div class="container">
<div class="us-autocomplete-pro-input-container">
<label for="us-autocomplete-pro-address-input">Start typing a street address and watch how fast we send you
verified suggestions</label><br>
<input id="us-autocomplete-pro-address-input" placeholder="Enter Address" autocomplete="smartystreets"/>
<ul class="us-autocomplete-pro-menu" style="display:none;"></ul>
<div class="disabled-inputs">
<input id="city" placeholder="City" disabled />
<div class="state-and-zip">
<input id="state" placeholder="State" disabled />
<input id="zip" placeholder="Zip*" disabled />
</div>
</div>
</div>
<div class="data-container">
<div>
<h3>*Additional Data</h3>
<div class="labels inline align-right">
<span>Latitude:</span><br>
<span>Longitude:</span><br>
<span>County:</span><br>
<span>Time Zone:</span>
</div>
<div class="data inline align-left">
<span id="data-lat"></span><br>
<span id="data-lon"></span><br>
<span id="data-county"></span><br>
<span id="data-time-zone"></span>
</div>
<div class="more-data">
... along with 32 other points of data.
</div>
</div>
</div>
<div class="disclaimer">*ZIP Code & Additional Data retrieved from <a href="https://smartystreets.com/products/apis/us-street-api">US
Street Address API</a></div>
</div>
<div class="docs-pricing-links">
Pretty cool huh? You should see the <a href="https://smartystreets.com/docs/cloud/us-autocomplete-api#autocomplete-professional">Autocomplete
Pro Docs</a> for more info
</div>
</div>
</body>
</html>

Working example od Angular google maps search address

I have problem with adding search by address option to my angular google maps code...
http://jsfiddle.net/lukasz9999/bmp62fan/
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(30.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
I suppose that I have to add a geocoder somehow but I don't know how.
If someone has a working example of Angular Google Map set position by address it would be great
Thank You
I would suggest to utilize Autocomplete feature for that purpose, below is provided the modified example:
Note: since Autocomplete is a feature of the Places library, be sure
to include it, e.g. libraries=places
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.8688, 151.2195),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
//init autocomplete
var input = document.getElementById('pac-input');
$scope.map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
//autocomplete.bindTo('bounds', $scope.map);
autocomplete.addListener('place_changed', function () {
setPlace();
});
var setPlace = function () {
//infoWindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
$scope.map.fitBounds(place.geometry.viewport);
} else {
$scope.map.setCenter(place.geometry.location);
}
createMarker({ lat: place.geometry.location.lat(), lng: place.geometry.location.lng(), address: place.formatted_address });
}
var createMarker = function (info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.lng),
title: info.address
});
marker.content = '<div class="infoWindowContent">' + info.address + '</div>';
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
$scope.openInfoWindow = function (e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
});
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 600px;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
<script src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div ng-app="mapsApp" ng-controller="MapCtrl">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="map"></div>
</div>
JSFiddle

Angular Select Options with image

I want select drop down option with respective images ,can anyone help me in this ,
here is my code
<select class="form-control demo-htmlselect"
ng-model="spList"
ng-options="spList.name for spList in spDTOList"
required>
<option disabled selected>Select Option</option>
</select>
Here I want get the options with images, I want to use pure angularjs,
can anyone help me to use select2 with angular js
Select2
Take a look at this guy. He seems to have built something similair to what you want
http://yairnevet.blogspot.dk/2013/02/multiple-select-drop-down-list-using.html
EDIT: It was pointed out to me (and i can see now when i see the code) that he indeed uses jquery to achieve what he easily could have done with angular alone. I still think the example serveres as a demonstration. The trick here is not use the default SELECT tag of html but instead style an UL with LI's to get the desired result.
Try this, i've used github iconselect project built on pure javascript, so you can add it to your project and invoke it from the angular controller. Check here for seeing it working. http://jsfiddle.net/Vsgyf/1/
HTML:
<script type="text/javascript" ng:autobind
src="http://code.angularjs.org/0.10.4/angular-0.10.4.js"></script>
<script type="text/javascript" src="http://bug7a.github.io/iconselect.js/sample/lib/iscroll.js"></script>
<div ng:controller="Ctrl">
<div id="my-icon-select"></div>
</div>
JS:
function Ctrl() {
this.list = [
{ name:'SWISS', img:'http://s9.postimage.org/d9t33we17/Swiss.png'},
{name:'UNITED', img:'http://s9.postimage.org/ykqn85w5n/United.png'},
{name:'KLM', img:'http://s9.postimage.org/p7unhshsb/Klm.png'},
{name:'EL AL', img:'http://s18.postimage.org/oi8ndntud/image.gif'},
{name:'Ethiopian', img:'http://s9.postimage.org/hqlg2ks97/image.gif'}
];
iconSelect = new IconSelect("my-icon-select");
var icons = [];
for(var i = 0; i< this.list.length; i++){
icons.push({'iconFilePath': this.list[i].img, 'iconValue':this.list[i].name});
}
iconSelect.refresh(icons);
};
IconSelect.DEFAULT = {};
IconSelect.DEFAULT.SELECTED_ICON_WIDTH = 48;
IconSelect.DEFAULT.SELECTED_ICON_HEIGHT = 48;
IconSelect.DEFAULT.SELECTED_BOX_PADDING = 1;
IconSelect.DEFAULT.SELECTED_BOX_PADDING_RIGHT = 12;
IconSelect.DEFAULT.ICONS_WIDTH = 32;
IconSelect.DEFAULT.ICONS_HEIGHT = 32;
IconSelect.DEFAULT.BOX_ICON_SPACE = 1;
IconSelect.DEFAULT.HORIZONTAL_ICON_NUMBER = 3;
IconSelect.DEFAULT.VECTORAL_ICON_NUMBER = 3;
IconSelect.COMPONENT_ICON_FILE_PATH = "http://bug7a.github.io/iconselect.js/sample/images/control/icon-select/arrow.png";
function IconSelect($$elementID, $$parameters) {
var _icons = [];
var _selectedIndex = -1;
var _boxScroll;
var _default = IconSelect.DEFAULT;
function _init() {
//parametreler boÅŸ gelirse
if(!$$parameters) $$parameters = {};
if(_View.setIconSelectElement($$elementID)){
//set parameters
$$parameters = _Model.checkParameters($$parameters);
//create UI
var ui = _View.createUI($$parameters, $$elementID);
_View.iconSelectElement.onclick = function(){
_View.showBox();
};
_View.showBox(false);
_View.iconSelectElement.addEventListener('click', function($event){
$event.stopPropagation();
});
window.addEventListener('click', function(){
_View.showBox(false);
});
}else{
alert("Element not found.");
}
}
this.refresh = function($icons){
_icons = [];
var setSelectedIndex = this.setSelectedIndex;
for(var i = 0; i < $icons.length; i++){
$icons[i].element = _View.createIcon($icons[i].iconFilePath, $icons[i].iconValue, i, $$parameters);
$icons[i].element.onclick = function(){
setSelectedIndex(this.childNodes[0].getAttribute('icon-index'));
};
_icons.push($icons[i]);
}
var horizontalIconNumber = Math.round(($icons.length) / $$parameters.vectoralIconNumber);
_View.boxElement.style.height = (($$parameters.iconsHeight + 2) * horizontalIconNumber) +
((horizontalIconNumber + 1) * $$parameters.boxIconSpace);
this.setSelectedIndex(0);
};
//icon listesini al.
this.getIcons = function(){ return _icons; };
//iconu seçili hale gelir.
this.setSelectedIndex = function($index){
var icon;
if(_icons.length > $index)
icon = _icons[$index];
if(icon){
if(_selectedIndex != -1) _icons[_selectedIndex].element.setAttribute('class','icon');
_selectedIndex = $index;
_View.selectedIconImgElement.setAttribute('src', icon.iconFilePath);
if(_selectedIndex != -1) _icons[_selectedIndex].element.setAttribute('class','icon selected');
}
_View.iconSelectElement.dispatchEvent(new Event('changed'));
};
this.getSelectedIndex = function(){ return _selectedIndex; };
this.getSelectedValue = function(){ return _icons[_selectedIndex].iconValue };
this.getSelectedFilePath = function(){ return _icons[_selectedIndex].iconFilePath };
//### VIEW CLASS ###
function _View(){}
_View.iconSelectElement;
_View.boxElement;
_View.boxScrollElement;
_View.selectedIconImgElement;
_View.selectedIconElement;
_View.showBox = function($isShown){
if($isShown == null) {
$isShown = (_View.boxElement.style.display == "none") ? true : false;
}
if($isShown) {
_View.boxElement.style.display = "block";
_View.boxScrollElement.style.display = "block";
_boxScroll = (_boxScroll) ? _boxScroll : new iScroll($$elementID + "-box-scroll");
}else{
_View.boxElement.style.display = "none";
_View.boxScrollElement.style.display = "none";
}
_View.boxElement.style.display = ($isShown) ? "block" : "none";
};
_View.setIconSelectElement = function($elementID){
_View.iconSelectElement = document.getElementById($elementID);
return _View.iconSelectElement;
};
_View.clearUI = function(){
_View.iconSelectElement.innerHTML = "";
};
_View.clearIcons = function(){
_View.boxElement.innerHTML = "";
};
_View.createUI = function($parameters){
/* HTML MODEL
<div id="my-icon-select" class="icon-select">
<div class="selected-box">
<div class="selected-icon"><img src="images/icons/i2.png"></div>
<div class="component-icon"><img src="images/control/icon-select/arrow.png"></div>
<div class="box">
<div class="icon"><img src="images/icons/i1.png"></div>
<div class="icon selected"><img src="images/icons/i2.png"></div>
<div class="icon"><img src="images/icons/i3.png"></div>
<div class="icon"><img src="images/icons/i4.png"></div>
<div class="icon"><img src="images/icons/i3.png"></div>
<div class="icon"><img src="images/icons/i4.png"></div>
<div class="icon"><img src="images/icons/i5.png"></div>
<div class="icon"><img src="images/icons/i6.png"></div>
<div class="icon"><img src="images/icons/i7.png"></div>
<div class="icon"><img src="images/icons/i8.png"></div>
</div>
</div>
</div>
*/
_View.clearUI();
_View.iconSelectElement.setAttribute('class', 'icon-select');
var selectedBoxElement = document.createElement('div');
selectedBoxElement.setAttribute('class' ,'selected-box');
var selectedIconElement = document.createElement('div');
selectedIconElement.setAttribute('class' ,'selected-icon');
_View.selectedIconImgElement = document.createElement('img');
_View.selectedIconImgElement.setAttribute('src', '');
selectedIconElement.appendChild(_View.selectedIconImgElement);
var componentIconElement = document.createElement('div');
componentIconElement.setAttribute('class', 'component-icon');
var componentIconImgElement = document.createElement('img');
componentIconImgElement.setAttribute('src', IconSelect.COMPONENT_ICON_FILE_PATH );
componentIconElement.appendChild(componentIconImgElement);
_View.boxScrollElement = document.createElement('div');
_View.boxScrollElement.setAttribute('id',$$elementID + "-box-scroll");
_View.boxScrollElement.setAttribute('class', 'box');
_View.boxElement = document.createElement('div');
_View.boxScrollElement.appendChild(_View.boxElement);
_View.selectedIconImgElement.setAttribute('width', $parameters.selectedIconWidth);
_View.selectedIconImgElement.setAttribute('height', $parameters.selectedIconHeight);
selectedIconElement.style.width = $parameters.selectedIconWidth;
selectedIconElement.style.height = $parameters.selectedIconHeight;
selectedBoxElement.style.width = $parameters.selectedIconWidth + $parameters.selectedBoxPadding + $parameters.selectedBoxPaddingRight;
selectedBoxElement.style.height = $parameters.selectedIconHeight + ($parameters.selectedBoxPadding * 2);
selectedIconElement.style.top = $parameters.selectedBoxPadding;
selectedIconElement.style.left = $parameters.selectedBoxPadding;
componentIconElement.style.bottom = 4 + $parameters.selectedBoxPadding;
_View.boxScrollElement.style.left = parseInt(selectedBoxElement.style.width) + 1;
_View.boxScrollElement.style.width = (($parameters.iconsWidth + 2) * $parameters.vectoralIconNumber) +
(($parameters.vectoralIconNumber + 1) * $parameters.boxIconSpace);
_View.boxScrollElement.style.height = (($parameters.iconsHeight + 2) * $parameters.horizontalIconNumber) +
(($parameters.horizontalIconNumber + 1) * $parameters.boxIconSpace);
_View.boxElement.style.left = _View.boxScrollElement.style.left;
_View.boxElement.style.width = _View.boxScrollElement.style.width;
_View.iconSelectElement.appendChild(selectedBoxElement);
selectedBoxElement.appendChild(selectedIconElement);
selectedBoxElement.appendChild(componentIconElement);
selectedBoxElement.appendChild(_View.boxScrollElement);
var results = {};
results['iconSelectElement'] = _View.iconSelectElement;
results['selectedBoxElement'] = selectedBoxElement;
results['selectedIconElement'] = selectedIconElement;
results['selectedIconImgElement'] = _View.selectedIconImgElement;
results['componentIconElement'] = componentIconElement;
results['componentIconImgElement'] = componentIconImgElement;
return results;
};
_View.createIcon = function($iconFilePath, $iconValue, $index, $parameters){
var iconElement = document.createElement('div');
iconElement.setAttribute('class', 'icon');
iconElement.style.width = $parameters.iconsWidth;
iconElement.style.height = $parameters.iconsHeight;
iconElement.style.marginLeft = $parameters.boxIconSpace;
iconElement.style.marginTop = $parameters.boxIconSpace;
var iconImgElement = document.createElement('img');
iconImgElement.setAttribute('src', $iconFilePath);
iconImgElement.setAttribute('icon-value', $iconValue);
iconImgElement.setAttribute('icon-index', $index);
iconImgElement.setAttribute('width', $parameters.iconsWidth);
iconImgElement.setAttribute('height', $parameters.iconsHeight);
iconElement.appendChild(iconImgElement);
_View.boxElement.appendChild(iconElement);
return iconElement;
};
//### MODEL CLASS ###
function _Model(){}
//TODO: params değişkenini kaldır yeni oluştursun.
_Model.checkParameters = function($parameters){
$parameters.selectedIconWidth = ($parameters.selectedIconWidth) ? $parameters.selectedIconWidth : _default.SELECTED_ICON_WIDTH;
$parameters.selectedIconHeight = ($parameters.selectedIconHeight) ? $parameters.selectedIconHeight : _default.SELECTED_ICON_HEIGHT;
$parameters.selectedBoxPadding = ($parameters.selectedBoxPadding) ? $parameters.selectedBoxPadding : _default.SELECTED_BOX_PADDING;
$parameters.selectedBoxPaddingRight = ($parameters.selectedBoxPaddingRight) ? $parameters.selectedBoxPaddingRight : _default.SELECTED_BOX_PADDING_RIGHT;
$parameters.iconsWidth = ($parameters.iconsWidth) ? $parameters.iconsWidth : _default.ICONS_WIDTH;
$parameters.iconsHeight = ($parameters.iconsHeight) ? $parameters.iconsHeight : _default.ICONS_HEIGHT;
$parameters.boxIconSpace = ($parameters.boxIconSpace) ? $parameters.boxIconSpace : _default.BOX_ICON_SPACE;
$parameters.vectoralIconNumber = ($parameters.vectoralIconNumber) ? $parameters.vectoralIconNumber : _default.VECTORAL_ICON_NUMBER;
$parameters.horizontalIconNumber = ($parameters.horizontalIconNumber) ? $parameters.horizontalIconNumber : _default.HORIZONTAL_ICON_NUMBER;
return $parameters;
};
_init();
}
CSS:
.icon-select{
width:0px;
}
.icon-select .selected-box {
position: relative;
margin: 0px;
padding: 0px;
width: 70px; /* sil */
height: 60px; /* sil */
border: 1px solid #999999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.icon-select .selected-box:hover {
position: relative;
margin: 0px;
padding: 0px;
width: 70px; /* sil */
height: 60px; /* sil */
border: 1px solid #000000;
background-color: #FFFFFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.icon-select .selected-icon {
position: absolute;
margin: 0px;
padding: 0px;
top:5px;
left:5px;
width: 48px; /* sil */
height: 48px; /* sil */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.icon-select .component-icon{
position: absolute;
bottom:5px;
right:4px;
}
.icon-select .box {
position: absolute;
top:0px;
left:71px;
margin: 0px;
padding: 0px;
width: 170px; /* sil */
height: 170px; /* sil */
border: 1px solid #EEEEEE;
background-color: #EEEEEE;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow:auto;
/*
-webkit-overflow-scrolling: touch;
*/
}
.icon-select .icon {
position: relative;
margin: 5px 0px 0px 5px;
padding: 0px;
width: 48px; /* sil */
height: 48px; /* sil */
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow:hidden;
float: left;
}
.icon-select .icon:hover {
border: 1px solid #000000;
}
.icon-select .icon.selected {
position: relative;
margin: 5px 0px 0px 5px;
padding: 0px;
width: 48px; /* sil */
height: 48px; /* sil */
border: 1px solid #EEEEEE;
background-color: #EEEEEE;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow:hidden;
float: left;
}
You could use angular-strap select.I believe thats better than going through the confusing documentation of select2
http://mgcrea.github.io/angular-strap/##selects
We Can achieve this using select2 templating with angular, select2-ui for angular helps to design select2-angular
Checkout a example at angularjs select option with custom format value
Having style inside select boxes is very restricted. You can infact not use images, or webfonts inside select boxes. It is restricted from the browser. Imagine what would happen if a cell-phone or tablet which usually have the OS's custom dropdown, that would screw up everything.
Your only option is to go with a custom directive for example angular-dropdowns.
https://github.com/jseppi/angular-dropdowns
I have used it in some projects and it is fairy easy to style and you can include both images and webfonts.

Using a form checkbox in a div to control the visibility of a vector layer in OpenLayers

I am trying to toggle the visibility of a vector layer in OpenLayers that displays a gpx trace using a form button defined in the body, and positioned over the map using a div. I don't want to use the built in control as it is by default hidden, and I want to add further info by the checkbox.
<input name="slow" type="checkbox" class="newstext"
id="slow" onClick="slowtrace();" checked>
The function 'slowtrace' is in the head script. 'lgpx2' is the vector layer showing the trace:
function slowtrace()
{if (lgpx2.getVisibility() == true)
{lgpx2.setVisibility(false);}
else
{lgpx2.setVisibility(true);}}
However it doesn't work, giving the error - Reference error: can't find variable: slowtrace.
There are two vector layers showing two gpx traces. I've been trying this with the slow trace 'lgpx2', not the other named 'lgpx', and the upper tick box in the div over the map, corresponding to 'slow run'.
The code for the whole page is:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head>
<link rel="stylesheet" href="http://www.carnethy.com/carn.css" type="text/css">
<title>Wed training 20th March 2013 - golf courses</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
var lat
var lon
var zoom
var latstart=55.92900
var lonstart=-3.19300
var map;
function init() {
map = new OpenLayers.Map ("map", {controls:[
new OpenLayers.Control.Navigation({zoomWheelEnabled : false}),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,- 20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);
//slow run stylemap
var gpxStyles = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
pointRadius: "1", // sized according to type attribute
label: "${name}",
labelAlign: "rb",
labelOutlineColor: "white",
labelOutlineWidth: 3,
fontSize: 15,
fontFamily: "Arial",
fontColor: "brown",
labelYOffset: 10,
fillColor: "black",
strokeColor: "red",
strokeWidth: 2,
strokeOpacity: 0.8
}),
});
//fast run stylemap
var gpxStyles2 = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
pointRadius: "1", // sized according to type attribute
label: "${name}",
labelAlign: "rb",
labelOutlineColor: "white",
labelOutlineWidth: 3,
fontSize: 15,
fontFamily: "Arial",
fontColor: "blue",
labelYOffset: 10,
fillColor: "black",
strokeColor: "blue",
strokeWidth: 2,
strokeOpacity: 0.8,
}),
});
// Add the Layer with the GPX Track fast run - ignore this bit
var lgpx = new OpenLayers.Layer.Vector("wed training fast", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "http://www.carnethy.com/maps/wed_training/2013/gpx/20-Mar-13-fast.gpx",
format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
}),
styleMap: gpxStyles,
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);
// fit map to bounds of window and add start pin
lgpx.events.register("loadend", lgpx, function() {
this.map.zoomToExtent(this.getDataExtent());
var startPoint = this.features[0].geometry.components[0];
layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
});
// Add the Layer with the GPX Track slow run
// This is the layer I am practising on
var lgpx2 = new OpenLayers.Layer.Vector("wed training slow", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "http://www.carnethy.com/maps/wed_training/2013/gpx/20-Mar-13-slow.gpx",
format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
}),
styleMap: gpxStyles2,
projection: new OpenLayers.Projection("EPSG:4326"),
});
map.addLayer(lgpx2);
// fit map to bounds of window and add start pin
lgpx2.events.register("loadend", lgpx2, function() {
this.map.zoomToExtent(this.getDataExtent());
var startPoint = this.features[0].geometry.components[0];
layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
});
// the non functional function
function slowtrace()
{if (lgpx2.getVisibility() == true)
{lgpx2.setVisibility(false);}
else
{lgpx2.setVisibility(true);}}
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.carnethy.com/maps/mapping%20info/small_red_pin.png',size,offset);
var icon2 = new OpenLayers.Icon('http://www.carnethy.com/maps/mapping%20info/small_blue_pin.png',size,offset);
}
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.mapposn {
display: block;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
}
#key {
height: 40px;
width: 360px;
position: absolute;
left: 50%;
margin-left: -150px;
font-family: Verdana, Geneva, sans-serif;
font-size: small;
background-color: #FFF;
top: 25px;
padding-left: 10px;
padding-top: 3px;
border: 1px solid #666;
}
#blue {
width: 85px;
display: inline;
left: 105px;
font-size: 2px;
position: absolute;
background-color: #36F;
margin-top: 7px;
}
#red {
width: 85px;
display: inline;
left: 105px;
font-size: 2px;
position: absolute;
background-color: #C30;
margin-top: 7px;
}
-->
</style>
</head>
<body onLoad="init();">
<div class="mapposn" id="map"></div>
<div id="key"><span class="plaintext" style="color:#36F">
<input name="slow" type="checkbox" class="newstext" id="slow" onClick="slowtrace();" checked>
Slow run 6.82 miles (10.98k) </span>
<div id="blue"> </div><br>
<span class="plaintext" style="color:#C30">
<input name="Fast" type="checkbox" class="newstext" id="fast" checked>
Fast run 7.93 miles (12.8k)</span>
<div id="red"> </div>
</div>
</body>
</html>
I've made it work using jquery. It looks in the named div to see whether the checkbox has been unchecked/toggled. I adapted this code from an example so don't really know why it works, or why the previous version didn't. So if anyone can enlighten me? Is there a way to do it without jquery?
Solution:
Add link to jquery src,
take out the onclick event from the checkboxes...
<input name="slow" type="checkbox" class="newstext" id="slow" checked>
...and write the visibility function thus:
$(document).ready(function(){
function slowtrace()
{if (lgpx2.getVisibility() == true)
{lgpx2.setVisibility(false);}
else
{lgpx2.setVisibility(true);}}
function fasttrace()
{if (lgpx.getVisibility() == true)
{lgpx.setVisibility(false);}
else
{lgpx.setVisibility(true);}}
$("#slow").on("change", slowtrace);
$("#fast").on("change", fasttrace);
});

Resources