Is there a ready-made maidenhead grid overlay for Leaflet? If not, how to create it?
There isn't one, so I created my own: Leaflet.Maidenhead.
So with a bit of HTML like
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.maidenhead#1.0.0/src/maidenhead.js"></script>
and then a bit of javascript like
L.maidenhead({precision: 6}).addTo(map)
you should be able to have something that looks like
Related
My Question is can we use materialIUI without React? if yes then is it CDN or any other way
<script src="https://unpkg.com/react-dom#16.4.2/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/#material-ui/core#3.0.1/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone#latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
You probably could get Material UI working without React/JSX (to some minimal extent), but it's going to be a very challenging process. It would not be a matter of importing Material UI from a CDN and adding class names to your HTML elements.
If you need a Material Design themed framework, Materialize is an open source alternative written in Vanilla JS/CSS/HTML (no React needed).
The leaflet map binds to the two geojson files just fine locally, but it does not render when I upload the document to github. The leaflet base map loads fine.
I tried the solution listed here: Leaflet with GitHub Pages - not rendering
But it had no apparent effect.
Thanks!
I figured it out - the leaflet scripts were in HTTPS, but the jquery was not. I updated it and it works great!
Before:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
After:
<link rel="stylesheet" href="https://npmcdn.com/leaflet#1.0.0-rc.2/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet#1.0.0-rc.2/dist/leaflet.js"></script>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Ionic slide box images only rewinding by default.But I want Slider to be cyclical. How to solve it.
I tried to implement jquery slider instead of Ionic slide box . But its not worked properly.
I tried this files to add a header on my index page
<script src="lib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').nivoSlider();
});
</script>
<link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider" ng-repeat="club in slider">
<img ng-src="{{club.url}}" style='width:100% !important;' >
</div>
</div>
I had add this code on my controller it working fine for me.
$ionicSlideBoxDelegate.update();
$ionicSlideBoxDelegate.loop(true);
Few suggestions if you want to use jQuery with ionic/angularJS:
Load your jquery before ionic js and angular js libraries loads.
Call jQuery from your controllers for better control over application flow. eg. $('#slider').nivoSlider(); call it from your controller and put your html in view template of the controller.
It would be great if your can elaborate on the kind of slider you want in your app (I couldn't understand what you mean by cyclical).
NOTE : UPDATED MY QUESTION
Some times, we have to overwrite the css file in template page, by using following code
<?php $this->headLink()->appendStylesheet(BASE_URL . 'css/test.css'); ?>
This appends first file with all existing css file in our page.
For example,
<link href="/css/test.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/css.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/front.css" media="screen" rel="stylesheet" type="text/css" />
From Above source, test.css is appended.I need that be after front.css
it make new css file is overwritten by default css file.This results our new css is not reflecting in site. so we need to keep include the css file at end.
How can we include in zend? kindly advice on this.
Use prependStylesheet($href, $media, $conditionalStylesheet, $extras) instead of append. Or even cleaner, use the helpers for all your stylesheets and append them in the right order.
I'm hoping to be able to load an ExtJS chart inside Ext.Net(coolite) pages.
I've copied the pie chart from the ExtJS samples and have put it in an test aspx document to see it work:
heres is my pie.aspx
<html>
<head>
<title>Pie Chart</title>
<script type="text/javascript" src="ExtJs4/ext-all.js" />
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths: { 'Ext': "/app/" }
});
</script>
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/CSS/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ExtJs4/examples/shared/example.css" />
<script type="text/javascript" src="ExtJs4/examples/example-data.js"></script>
<script type="text/javascript" src="app/pie.js"></script>
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
</head>
<body id="docbody">
</body>
when I try and load it from an Ext.Window I dont see anything just an empty popup. if I go to the url directly i dotn see anything either
Here's the code I'm using to attempt to load the chart (i put it inside my existing coolite code):
<ext:Window
Title='!'
runat="server"
AutoDataBind="true"
Modal="true"
ID="ChartWindow"
Width="900"
Height="670"
Hidden="false">
<AutoLoad Url="pie.aspx" Mode="IFrame" />
</ext:Window>
Am I going about this the wrong way in trying to using the Ext.Net dll with the new ExtJS libraries? Is there another way I could go about accomplishing the same thing (ie: have a server-side window to load the ExtJS 4 charts)?
Thanks for any input.
solved!!
not sure what was the problem,my code is correct,maybe only the cache