Google Map not rendered again - after pointing to load resources from rawgit it worked only for a week or so - ruby-on-rails-4

I have my app using gmaps4rails working for a while after Google moved to GIT.
Here is what I am using in the application.htm.erb
<script src="https://maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
And in the Gemfile I have these lines
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
In the application.js I have this line
//= require gmaps/google
Here is the page supposed to render the map.
<div class="row-fluid">
<div id="map" style='width: 100%; height: 500px; border: 1px solid black;'></div>
</div>
<script type="text/javascript">
buildMap (<%=raw #hash.to_json %>);
</script>
And the associated coffee script is
class RichMarkerBuilder extends Gmaps.Google.Builders.Marker #inherit from builtin builder
#override create_marker method
create_marker: ->
options = _.extend #marker_options(), #rich_marker_options()
#serviceObject = new RichMarker options #assign marker to #serviceObject
rich_marker_options: ->
marker = document.createElement("div")
marker.setAttribute 'class', 'marker_container'
marker.innerHTML = #args.title
_.extend(#marker_options(), { content: marker })
infobox: (boxText)->
content: boxText
pixelOffset: new google.maps.Size(-140, 0)
boxStyle:
width: "400px"
# override method
create_infowindow: ->
return null unless _.isString #args.infowindow
boxText = document.createElement("div")
boxText.setAttribute("class", 'marker_info_box') #to customize
boxText.innerHTML = #args.infowindow
#infowindow = new InfoBox(#infobox(boxText))
#buildMap = (markers)->
handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} } #dependency injection
#then standard use
handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
markers = handler.addMarkers(markers)
handler.bounds.extendWith(markers)
handler.fitMapToBounds()
None of this code was recently changed (in the last week or so).
I only executed a bundle update today that upgraded the gems jbuilder from 2.4.1 to 2.5.0 and autoprefixer from 6.3.6.1 to 6.3.6.2.
The app was working having the map rendered until now when the map is not shown anymore.
I reverted these two gems to the previous versions but still no map rendered.
Don't know how to make it working again?

I just changed the order of the scripts to be loaded and now the map is rendered again, here is the code:
<script src="//maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
Problem solved.

Related

Trying to get a Google maps to display in Django

I wondered if anyone has managed to get Google maps working within a Django project and if so, could they tell me what I may be doing wrong.
In base.html, I have the following scripts at the end of the body in base.html :
<script src="{% static '/js/script.js' %}" ></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src=https://maps.googleapis.com/maps/api/js?key=”API_KEY”&callback=initMap"></script>
<script src="{% static '/js/maps.js' %}" ></script>
Script.js is working fine and map.js is executing but after map.js runs the div element doesn’t display.
In maps.js, I have:
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
//zoom: 3,
zoom: 10,
center: {
lat: 46.619261, lng: -33.134766
}
});
var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var locations = [
{ lat: 40.785091, lng: -73.968285},
{ lat: 41.084045, lng: -73.874245},
{ lat: 40.754932, lng: -73.984016}
];
var markers = locations.map(function(location, i){
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer( map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' } );
}
I do not seem to have any Google API key issues. However I have a div in the index.html with the following element and the map is not being displayed:
<div class="row">
<!-- Map -->
<div id="map" class="col-12"></div>
<div class="col-12 mt-2 request-page">
<h2>Map Will Go Above Here </h2>
</div>
</div>
I can get the map to display if I load static in index.html and place the scripts in index.html but ideally I think I am meant to do this in base.html.
I have not changed settings.py, views.py or urls.py to accommodate Google maps, is that where my error is?
Thanks in advance.
if there is a blank gap create a CSS file and add#map {height:500px;width: 100%;}
do not forget to link it to html.
This is probably because the div element #map does not have a defined height. Try adding style="height: 300px" to it.

adding latex rendering script to django-markdownx admin

I'm making a personal homepage with Django. I am using django-markdownx for the content of article model. In addition, Katex has been implemented to the project with lines of JS in the Django template HTML to render Latex.
What I'm having a hard time is applying this Katex JS code to the Django admin page. How can I implement the JS code below to specific elements of the Django admin page? I don't want the script to be applied to all elements of the admin page, because editing text boxes should show raw Latex code, but only the preview part should render Latex parts as equations.
Here are django-markdownx, and Katex references:
https://neutronx.github.io/django-markdownx/
https://katex.org/docs/api.html
This is a JS code block that I'm using for Latex rendering.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.css"
integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
crossorigin="anonymous"
/>
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.js"
integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz"
crossorigin="anonymous"
></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/contrib/auto-render.min.js"
integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
crossorigin="anonymous"
onload="renderMathInElement(document.body);"
></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "\\[", right: "\\]", display: true },
{ left: "$", right: "$", display: false },
{ left: "\\(", right: "\\)", display: false }
]
});
});
</script>

Build in production mode results in empty page while build in dev mode works perfectly (Angular 8)

In Development-mode (APS-WebAPI) the build works perfekt without errors (ng b --watch). When change to production-mode (ng b --aot OR ng b --prod) the page loads without error but results in an empty page. The Index.cshtml would generated by searching the *.js-files in the folder from the Homecontroller. This problem occurs since we upgrade from Angular-6 to Angular-8.
We would like to publish our changes and environment upgrade (Angular-8 & TypeScript 3.4.5). In Dev-mode (ng b --watch) we render the main.js / polyfills.js / runtime.js / styles.css / vendor.js / modules*.js to the Index.cshtml. This works perfectly.
When publishing with --aot or --prod we get all files with the ES5 and ES2015. In the same scheme we render that to the Index.cshtml. After loading the page, all files are found but the page is blank without an error. The files are all loaded like in the angular generated index.html
We use the following Index.cshtml, it`s generally the same for Dev- and Prod-Mode.
ConfigurationViewModel model = new ConfigurationViewModel();
var webPath = HttpRuntime.AppDomainAppVirtualPath;
var localPath = HostingEnvironment.MapPath(webPath);
var angularPath = Path.Combine(localPath ?? throw new InvalidOperationException(), "Map");
var angularDirectory = new DirectoryInfo(angularPath);
Prod-Mode
model.RuntimeJsEs5 = angularDirectory.GetFiles("runtime-es5*.js").Single().Name;
model.RuntimeJsEs2015 = angularDirectory.GetFiles("runtime-es2015*.js").Single().Name;
model.PolyfillsJsEs5 = angularDirectory.GetFiles("polyfills-es5*.js").Single().Name;
model.PolyfillsJsEs2015 = angularDirectory.GetFiles("polyfills-es2015*.js").Single().Name;
model.MainJsEs5 = angularDirectory.GetFiles("main-es5*.js").Single().Name;
model.MainJsEs2015 = angularDirectory.GetFiles("main-es2015*.js").Single().Name;
model.StylesCss = angularDirectory.GetFiles("styles.css").Single().Name;
<head>
....
<link rel="stylesheet" href="#Model.ConfigurationViewModel.StylesCss">
....
</head>
<body>
....
<script type="module" #src="#Model.ConfigurationViewModel.RuntimeJsEs2015"></script>
<script type="module" src="#Model.ConfigurationViewModel.PolyfillsJsEs2015"></script>
<script nomodule src="#Model.ConfigurationViewModel.RuntimeJsEs5"></script>
<script nomodule" src="#Model.ConfigurationViewModel.PolyfillsJsEs5"></script>
<script type="module" src="#Model.ConfigurationViewModel.MainJsEs2015"></script>
<script nomodule src="#Model.ConfigurationViewModel.MainJsEs5"></script>
....
</body>
Dev-Mode
model.RuntimeJsEs2015 = angularDirectory.GetFiles("runtime.js").Single().Name;
model.PolyfillsJsEs2015 = angularDirectory.GetFiles("polyfills.js").Single().Name;
model.MainJsEs2015 = angularDirectory.GetFiles("main.js").Single().Name;
model.StylesCss = angularDirectory.GetFiles("styles.css").Single().Name;
model.VendorJsEs2015 = angularDirectory.GetFiles("vendor.js").Single().Name;
<head>
....
<link rel="stylesheet" href="#Model.ConfigurationViewModel.StylesCss">
....
</head>
<body>
....
<script type="module" src="#Model.ConfigurationViewModel.RuntimeJsEs2015"></script>
<script type="module" src="#Model.ConfigurationViewModel.PolyfillsJsEs2015"></script>
<script type="module" src="#Model.ConfigurationViewModel.VendorJsEs2015"></script>
<script type="module" src="#Model.ConfigurationViewModel.MainJsEs2015"></script>
....
</body>
If necessary i would post also the angular.json later.
I would present my solution, if somebody has the same problem.
The "build-optimizer" from Angular induce the empty white page. The following github issue brougth me to the solution (https://github.com/angular/angular-cli/issues/8758). So if you disable the buildOptimizer in the the angular.json everything works perfectly.
FYI the angular issue 12112 points also to this problem (https://github.com/angular/angular-cli/issues/12112).

ChartJS does not display when using local Chart.js file

I am having a problem getting Chart.js to display a Chart when using the Chart.min.js file that was installed as a result of using:
npm install chart.js --save (However, if use the CDN supplied file - the chart will display)
To avoid putting paths into my code, I copied the Chart.min.js file from the install directory: ./node_modules/chart_js/dist/Chart.min.js to the directory where my web page is. Was this the right file to copy? Anyways, when I reload the App into the Browser, I get a blank display. There are no error messages at all.
However, if I instead use the CDN supplied file: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
Everything works. The Chart fully displays.
Here is the HTML file:
<html>
<head>
<meta charset="utf-8"/>
<title>Chart.js demo</title>
<script src="Chart.min.js" </script>
</head>
<body>
<h1>Chart.js Sample</h1>
<canvas id="countries" width="600" height="400"></canvas>
<script>
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
// Get the context of the canvas element we want to select
var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData);
</script>
</body>
</html>
So, what am I doing wrong? Is there an issue with the download?
Appreciate any help with this!
I am running on Mac OS X 10.10.5
I have tried this using both the Safari and FireFox browsers,
and have the same issue of the local Chart.min.js file not working.
You better use the latest syntax for creating your chart, instead of old one.
also, this is the correct directory where chart.js file resides, when installed through npm :
./node_modules/chart.js/dist/Chart.min.js
Here is the full code that works perfectly on Chrome, Firefox and Safari :
<html>
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src="./node_modules/chart.js/dist/Chart.min.js"></script>
</head>
<body>
<h1>Chart.js Sample</h1>
<div class="chart-container" style="width: 600px; height: 400px">
<canvas id="countries"></canvas>
</div>
<script>
var pieData = {
datasets: [{
data: [20, 40, 10, 30],
backgroundColor: ["#878BB6", "#4ACAB4", "#FF8153", "#FFEA88"]
}]
};
// Get the context of the canvas element we want to select
var countries = document.getElementById("countries").getContext("2d");
new Chart(countries, {
type: 'pie',
data: pieData
});
</script>
</body>
</html>
I think the problem must be the improper closing of the script tag. See below.
Before:
<script src="Chart.min.js" </script>
After:
<script src="Chart.min.js"></script>
Here is a demo with a local Chart.min.js File for your reference!
JSFiddle Demo

Sir Trevor ordered-list.js Error _ is not defined ordered-list.js:16

Just playing with Sir Trevor editor and found some custom blocks that could be used, having some issue with the ordered-list.js, code at https://github.com/madebymany/sir-trevor-blocks/blob/master/src/ordered-list.js
I am getting this error message whenever I click on the "Ordered List" icon.
Error stack:
Uncaught ReferenceError: _ is not definedordered-list.js:16
Sir Trevor.Blocks.OrderedList.SirTrevor.Block.extend.editorHTMLindex.js:4
Sir Trevor is able to load the ordered list plugin as I can see in the options when I use it, this error happens when I click on the Ordered List icon to use.
Can anyone point me in right direction as to what is going on there, I'm new to javascript and have been struggling with this for a day now.....
Any suggestions?
This is how I load the scripts
<script src="../node_modules/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/sir-trevor.debug.js" type="text/javascript" charset="utf-8"></script>
<script src="../locales/de.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/ordered-list.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
SirTrevor.config.debug = true;
SirTrevor.config.scribeDebug = true;
SirTrevor.config.language = "en";
SirTrevor.setBlockOptions("Text", {
onBlockRender: function() {
console.log("Text block rendered");
}
});
window.editor = new SirTrevor.Editor({
el: $('.sir-trevor'),
blockTypes: [
"OrderedList",
"Heading",
"Text",
"List",
"Quote",
"Image",
"Video",
"Tweet"
]
});
$('form').bind('submit', function () {
$('#st-json-debug').text(window.editor.store.toString(true));
return false;
});
});
</script>
You need Underscore.js . Thats what the error means. Load that as well.